<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/iframe-embed-object.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:37 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=images.html>← 4.8.4 Images</a> — <a href=index.html>Table of Contents</a> — <a href=media.html>4.8.8 The video element →</a></nav><ol class=toc><li id=toc-semantics><ol><li><ol><li><a href=iframe-embed-object.html#the-iframe-element><span class=secno>4.8.5</span> The
  <code>iframe</code> element</a><li><a href=iframe-embed-object.html#the-embed-element><span class=secno>4.8.6</span> The <code>embed</code> element</a><li><a href=iframe-embed-object.html#the-object-element><span class=secno>4.8.7</span> The <code>object</code> element</a></ol></ol></ol><h4 id=the-iframe-element><span class=secno>4.8.5</span> The
  <dfn data-dfn-type=element><code>iframe</code></dfn> element<a href=#the-iframe-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>15+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>14+</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement title="The HTMLIFrameElement interface provides special properties and methods (beyond those of the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.">HTMLIFrameElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/src title="The HTMLIFrameElement.src property reflects the HTML referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.">HTMLIFrameElement/src</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/width title="The width property of the HTMLObjectElement interface returns a string that reflects the width HTML attribute, specifying the displayed width of the resource in CSS pixels.">HTMLObjectElement/width</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/height title="The height property of the HTMLObjectElement interface Returns a string that reflects the height HTML attribute, specifying the displayed height of the resource in CSS pixels.">HTMLObjectElement/height</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-iframe-element:concept-element-categories>Categories</a>:<dd><a id=the-iframe-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-iframe-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-iframe-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-iframe-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-iframe-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-iframe-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-iframe-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-iframe-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-iframe-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-iframe-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-iframe-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-iframe-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-iframe-element:attr-iframe-src><a href=#attr-iframe-src>src</a></code> —  Address of the resource
     <dd><code id=the-iframe-element:attr-iframe-srcdoc><a href=#attr-iframe-srcdoc>srcdoc</a></code> —  A document to render in the <code id=the-iframe-element:the-iframe-element><a href=#the-iframe-element>iframe</a></code>
     <dd><code id=the-iframe-element:attr-iframe-name><a href=#attr-iframe-name>name</a></code> —  Name of <a id=the-iframe-element:content-navigable href=document-sequences.html#content-navigable>content navigable</a>
     <dd><code id=the-iframe-element:attr-iframe-sandbox><a href=#attr-iframe-sandbox>sandbox</a></code> —  Security rules for nested content
     <dd><code id=the-iframe-element:attr-iframe-allow><a href=#attr-iframe-allow>allow</a></code> —  <a href=https://w3c.github.io/webappsec-feature-policy/#permissions-policy id=the-iframe-element:concept-permissions-policy data-x-internal=concept-permissions-policy>Permissions policy</a> to be applied to the <code id=the-iframe-element:the-iframe-element-2><a href=#the-iframe-element>iframe</a></code>'s contents
     <dd><code id=the-iframe-element:attr-iframe-allowfullscreen><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> —  Whether to allow the <code id=the-iframe-element:the-iframe-element-3><a href=#the-iframe-element>iframe</a></code>'s contents to use <code id=the-iframe-element:dom-element-requestfullscreen><a data-x-internal=dom-element-requestfullscreen href=https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen>requestFullscreen()</a></code>
     <dd><code id=the-iframe-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-iframe-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd><code id=the-iframe-element:attr-iframe-referrerpolicy><a href=#attr-iframe-referrerpolicy>referrerpolicy</a></code> —  <a id=the-iframe-element:referrer-policy href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>Referrer policy</a> for <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-iframe-element:concept-fetch data-x-internal=concept-fetch>fetches</a> initiated by the element
     <dd><code id=the-iframe-element:attr-iframe-loading><a href=#attr-iframe-loading>loading</a></code> —  Used when determining loading deferral
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-iframe-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-iframe>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-iframe>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-iframe-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmliframeelement' data-dfn-type='interface'><c- g>HTMLIFrameElement</c-></dfn> : <a id='the-iframe-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-iframe-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-iframe-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-iframe-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-iframe-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  [<a id='the-iframe-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> (<code id='the-iframe-element:tt-trustedhtml'><a data-x-internal='tt-trustedhtml' href='https://w3c.github.io/trusted-types/dist/spec/#trustedhtml'><c- n>TrustedHTML</c-></a></code> <c- b>or</c-> <c- b>DOMString</c->) <a href='#dom-iframe-srcdoc' id='the-iframe-element:dom-iframe-srcdoc'><c- g>srcdoc</c-></a>;
  [<a id='the-iframe-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-iframe-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  [<c- g>SameObject</c->, <c- g>PutForwards</c->=<a href='https://dom.spec.whatwg.org/#dom-domtokenlist-value' id='the-iframe-element:dom-domtokenlist-value' data-x-internal='dom-domtokenlist-value'><c- n>value</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-iframe-element:domtokenlist' href='https://dom.spec.whatwg.org/#interface-domtokenlist' data-x-internal='domtokenlist'><c- n>DOMTokenList</c-></a> <dfn data-dfn-for='HTMLIFrameElement' id='dom-iframe-sandbox' data-dfn-type='attribute'><c- g>sandbox</c-></dfn>;
  [<a id='the-iframe-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-iframe-allow' data-dfn-type='attribute'><c- g>allow</c-></dfn>;
  [<a id='the-iframe-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>boolean</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-iframe-allowfullscreen' data-dfn-type='attribute'><c- g>allowFullscreen</c-></dfn>;
  [<a id='the-iframe-element:cereactions-6' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect-5'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-dim-width' data-dfn-type='attribute'><c- g>width</c-></dfn>;
  [<a id='the-iframe-element:cereactions-7' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-iframe-element:xattr-reflect-6'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLIFrameElement' id='dom-dim-height' data-dfn-type='attribute'><c- g>height</c-></dfn>;
  [<a id='the-iframe-element:cereactions-8' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-iframe-referrerpolicy' id='the-iframe-element:dom-iframe-referrerpolicy'><c- g>referrerPolicy</c-></a>;
  [<a id='the-iframe-element:cereactions-9' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <a href='#dom-iframe-loading' id='the-iframe-element:dom-iframe-loading'><c- g>loading</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-iframe-element:document' href='dom.html#document'><c- n>Document</c-></a>? <a href='#dom-iframe-contentdocument' id='the-iframe-element:dom-iframe-contentdocument'><c- g>contentDocument</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-iframe-element:windowproxy' href='nav-history-apis.html#windowproxy'><c- n>WindowProxy</c-></a>? <a href='#dom-iframe-contentwindow' id='the-iframe-element:dom-iframe-contentwindow'><c- g>contentWindow</c-></a>;
  <a id='the-iframe-element:document-2' href='dom.html#document'><c- n>Document</c-></a>? <a href='embedded-content-other.html#dom-media-getsvgdocument' id='the-iframe-element:dom-media-getsvgdocument'><c- g>getSVGDocument</c-></a>();

  // <a href='obsolete.html#HTMLIFrameElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  

  <p>The <code id=the-iframe-element:the-iframe-element-4><a href=#the-iframe-element>iframe</a></code> element <a id=the-iframe-element:represents href=dom.html#represents>represents</a> its <a id=the-iframe-element:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a>.</p>


  

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-iframe-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of a page that the element's <a id=the-iframe-element:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> is to
  contain. The attribute, if present, must be a <a id=the-iframe-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by
  spaces</a>. If the <code id=the-iframe-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-iframe-element:the-iframe-element-5><a href=#the-iframe-element>iframe</a></code> element, then the <code id=the-iframe-element:attr-iframe-src-2><a href=#attr-iframe-src>src</a></code> attribute must
  also be specified.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-srcdoc title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe#attr-srcdoc</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>25+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=iframe id=attr-iframe-srcdoc data-dfn-type=element-attr><code>srcdoc</code></dfn>
  attribute gives the content of the page that the element's <a id=the-iframe-element:content-navigable-4 href=document-sequences.html#content-navigable>content navigable</a> is to
  contain. The value of the attribute is used to <a href=browsing-the-web.html#create-navigation-params-from-a-srcdoc-resource id=the-iframe-element:create-navigation-params-from-a-srcdoc-resource>construct</a> <dfn id=an-iframe-srcdoc-document data-export="">an <code>iframe</code> <code>srcdoc</code> document</dfn>, which is a <code id=the-iframe-element:document-3><a href=dom.html#document>Document</a></code> whose
  <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-iframe-element:the-document's-address" data-x-internal="the-document's-address">URL</a> <a id=the-iframe-element:matches-about:srcdoc href=urls-and-fetching.html#matches-about:srcdoc>matches <code>about:srcdoc</code></a>.</p>

  <p>The <code id=the-iframe-element:attr-iframe-srcdoc-2><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute, if present, must have a value
  using <a id=the-iframe-element:syntax href=syntax.html#syntax>the HTML syntax</a> that consists of the following syntactic components, in the
  given order:</p>

  <ol><li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments>comments</a> and <a id=the-iframe-element:space-characters href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>Optionally, a <a href=syntax.html#syntax-doctype id=the-iframe-element:syntax-doctype>DOCTYPE</a>.

   <li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments-2>comments</a> and <a id=the-iframe-element:space-characters-2 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.<li>The <a id=the-iframe-element:document-element href=https://dom.spec.whatwg.org/#document-element data-x-internal=document-element>document element</a>, in the form of an <code id=the-iframe-element:the-html-element><a href=semantics.html#the-html-element>html</a></code> <a href=syntax.html#syntax-elements id=the-iframe-element:syntax-elements>element</a>.<li>Any number of <a href=syntax.html#syntax-comments id=the-iframe-element:syntax-comments-3>comments</a> and <a id=the-iframe-element:space-characters-3 href=https://infra.spec.whatwg.org/#ascii-whitespace data-x-internal=space-characters>ASCII
   whitespace</a>.</ol>

  <p class=note>The above requirements apply in <a id=the-iframe-element:xml-documents href=https://dom.spec.whatwg.org/#xml-document data-x-internal=xml-documents>XML documents</a> as well.

  <div class=example>

   <p>Here a blog uses the <code id=the-iframe-element:attr-iframe-srcdoc-3><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute in conjunction
   with the <code id=the-iframe-element:attr-iframe-sandbox-2><a href=#attr-iframe-sandbox>sandbox</a></code> attribute described below to provide
   users of user agents that support this feature with an extra layer of protection from script
   injection in the blog post comments:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>h1</c-><c- p>&gt;</c->I got my own magazine!<c- p>&lt;/</c-><c- f>h1</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->After much effort, I&apos;ve finally found a publisher, and so now I
 have my own magazine! Isn&apos;t that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it&apos;s going to be great!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Written by <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/cap&quot;</c-><c- p>&gt;</c->cap<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c->, 1 hour ago.
 <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Thirteen minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/ch&quot;</c-><c- p>&gt;</c->ch<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;did you get a cover picture yet?&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Nine minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/cap&quot;</c-><c- p>&gt;</c->cap<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;Yeah, you can see it &lt;a href=&amp;quot;/gallery?mode=cover&amp;amp;amp;page=1&amp;quot;&gt;in my gallery&lt;/a&gt;.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>footer</c-><c- p>&gt;</c-> Five minutes ago, <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/users/ch&quot;</c-><c- p>&gt;</c->ch<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> wrote: <c- p>&lt;/</c-><c- f>footer</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>srcdoc</c-><c- o>=</c-><c- s>&quot;&lt;p&gt;hey that&apos;s earl&apos;s table.</c->
<c- s>&lt;p&gt;you should get earl&amp;amp;amp;me on the next cover.&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

   <p>Notice the way that quotes have to be escaped (otherwise the <code id=the-iframe-element:attr-iframe-srcdoc-4><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute would end prematurely), and the way raw
   ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be
   <em>doubly</em> escaped — once so that the ampersand is preserved when originally parsing
   the <code id=the-iframe-element:attr-iframe-srcdoc-5><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute, and once more to prevent the
   ampersand from being misinterpreted when parsing the sandboxed content.</p>

   <p>Furthermore, notice that since the <a href=syntax.html#syntax-doctype id=the-iframe-element:syntax-doctype-2>DOCTYPE</a> is optional in
   <a href=#an-iframe-srcdoc-document id=the-iframe-element:an-iframe-srcdoc-document><code>iframe</code> <code>srcdoc</code> documents</a>, and the <code id=the-iframe-element:the-html-element-2><a href=semantics.html#the-html-element>html</a></code>,
   <code id=the-iframe-element:the-head-element><a href=semantics.html#the-head-element>head</a></code>, and <code id=the-iframe-element:the-body-element><a href=sections.html#the-body-element>body</a></code> elements have <a href=syntax.html#syntax-tag-omission>optional
   start and end tags</a>, and the <code id=the-iframe-element:the-title-element><a href=semantics.html#the-title-element>title</a></code> element is also optional in <a href=#an-iframe-srcdoc-document id=the-iframe-element:an-iframe-srcdoc-document-2><code>iframe</code> <code>srcdoc</code>
   documents</a>, the markup in a <code id=the-iframe-element:attr-iframe-srcdoc-6><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute can be
   relatively succinct despite representing an entire document, since only the contents of the
   <code id=the-iframe-element:the-body-element-2><a href=sections.html#the-body-element>body</a></code> element need appear literally in the syntax. The other elements are still
   present, but only by implication.</p>

  </div>

  <p class=note>In <a id=the-iframe-element:syntax-2 href=syntax.html#syntax>the HTML syntax</a>, authors need only remember to use U+0022
  QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0026
  AMPERSAND (&amp;) and U+0022 QUOTATION MARK (") characters, and to specify the <code id=the-iframe-element:attr-iframe-sandbox-3><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, to ensure safe embedding of content. (And
  remember to escape ampersands before quotation marks, to ensure quotation marks become &amp;quot;
  and not &amp;amp;quot;.)</p>

  <p class=note>In XML the U+003C LESS-THAN SIGN character (&lt;) needs to be escaped as well. In
  order to prevent <a href=https://www.w3.org/TR/xml/#AVNormalize>attribute-value
  normalization</a>, some of XML's whitespace characters — specifically U+0009 CHARACTER
  TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be
  escaped. <a href=references.html#refsXML>[XML]</a></p>

  <p class=note>If the <code id=the-iframe-element:attr-iframe-src-3><a href=#attr-iframe-src>src</a></code> attribute and the <code id=the-iframe-element:attr-iframe-srcdoc-7><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute are both specified together, the <code id=the-iframe-element:attr-iframe-srcdoc-8><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute takes priority. This allows authors to provide
  a fallback <a id=the-iframe-element:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> for legacy user agents that do not support the <code id=the-iframe-element:attr-iframe-srcdoc-9><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute.</p>


  

  <hr> 

  <p>The <code id=the-iframe-element:the-iframe-element-6><a href=#the-iframe-element>iframe</a></code> <a id=the-iframe-element:html-element-post-connection-steps href=infrastructure.html#html-element-post-connection-steps>HTML element post-connection steps</a>, given
  <var>insertedNode</var>, are:</p>

  <ol><li><p><a id=the-iframe-element:create-a-new-child-navigable href=document-sequences.html#create-a-new-child-navigable>Create a new child navigable</a> for <var>insertedNode</var>.<li><p>If <var>insertedNode</var> has a <code id=the-iframe-element:attr-iframe-sandbox-4><a href=#attr-iframe-sandbox>sandbox</a></code>
   attribute, then <a href=browsers.html#parse-a-sandboxing-directive id=the-iframe-element:parse-a-sandboxing-directive>parse the sandboxing
   directive</a> given the attribute's value and <var>insertedNode</var>'s
   <a id=the-iframe-element:iframe-sandboxing-flag-set href=browsers.html#iframe-sandboxing-flag-set><code>iframe</code> sandboxing flag set</a>.<li><p><a href=#process-the-iframe-attributes id=the-iframe-element:process-the-iframe-attributes>Process the <code>iframe</code> attributes</a> for <var>insertedNode</var>, with
   <i id=the-iframe-element:process-iframe-initial-insertion><a href=#process-iframe-initial-insertion>initialInsertion</a></i> set to true.</ol>

  <p>The <code id=the-iframe-element:the-iframe-element-7><a href=#the-iframe-element>iframe</a></code> <a id=the-iframe-element:html-element-removing-steps href=infrastructure.html#html-element-removing-steps>HTML element removing steps</a>, given
  <var>removedNode</var>, are to <a id=the-iframe-element:destroy-a-child-navigable href=document-sequences.html#destroy-a-child-navigable>destroy a child navigable</a> given
  <var>removedNode</var>.</p>

  <p class=note>This happens without any <code id=the-iframe-element:event-unload><a href=indices.html#event-unload>unload</a></code> events firing
  (the element's <a id=the-iframe-element:concept-bcc-content-document href=document-sequences.html#concept-bcc-content-document>content document</a> is <em><a href=document-sequences.html#destroy-a-child-navigable id=the-iframe-element:destroy-a-child-navigable-2>destroyed</a></em>, not <em><a href=document-lifecycle.html#unload-a-document id=the-iframe-element:unload-a-document>unloaded</a></em>).</p>

  <p class=XXX>Although <code id=the-iframe-element:the-iframe-element-8><a href=#the-iframe-element>iframe</a></code>s are processed while in a <a id=the-iframe-element:shadow-tree href=https://dom.spec.whatwg.org/#concept-shadow-tree data-x-internal=shadow-tree>shadow tree</a>,
  per the above, several other aspects of their behavior are not well-defined with regards to
  shadow trees. See <a href=https://github.com/whatwg/html/issues/763>issue #763</a> for more
  detail.</p>

  

  <p>Whenever an <code id=the-iframe-element:the-iframe-element-9><a href=#the-iframe-element>iframe</a></code> element with a non-null <a id=the-iframe-element:content-navigable-5 href=document-sequences.html#content-navigable>content navigable</a> has its
  <code id=the-iframe-element:attr-iframe-srcdoc-10><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute set, changed, or removed, the user
  agent must <a href=#process-the-iframe-attributes id=the-iframe-element:process-the-iframe-attributes-2>process the <code>iframe</code> attributes</a>.</p>

  <p>Similarly, whenever an <code id=the-iframe-element:the-iframe-element-10><a href=#the-iframe-element>iframe</a></code> element with a non-null <a id=the-iframe-element:content-navigable-6 href=document-sequences.html#content-navigable>content
  navigable</a> but with no <code id=the-iframe-element:attr-iframe-srcdoc-11><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute specified
  has its <code id=the-iframe-element:attr-iframe-src-4><a href=#attr-iframe-src>src</a></code> attribute set, changed, or removed, the user
  agent must <a href=#process-the-iframe-attributes id=the-iframe-element:process-the-iframe-attributes-3>process the <code>iframe</code> attributes</a>.</p> 

  <p>To <dfn id=process-the-iframe-attributes>process the <code>iframe</code> attributes</dfn> for an element <var>element</var>,
  with an optional boolean <dfn id=process-iframe-initial-insertion><var>initialInsertion</var></dfn> (default false):</p>

  <ol><li>
    <p>If <var>element</var>'s <code id=the-iframe-element:attr-iframe-srcdoc-12><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is
    specified, then:</p>

    <ol><li><p>Set <var>element</var>'s <a href=#current-navigation-was-lazy-loaded id=the-iframe-element:current-navigation-was-lazy-loaded>current navigation was lazy loaded</a> boolean to
     false.<li>
      <p>If the <a id=the-iframe-element:will-lazy-load-element-steps href=urls-and-fetching.html#will-lazy-load-element-steps>will lazy load element steps</a> given <var>element</var> return true,
      then:</p>

      <ol><li><p>Set <var>element</var>'s <a id=the-iframe-element:lazy-load-resumption-steps href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load resumption steps</a> to the rest of this
       algorithm starting with the step labeled <i>navigate to the srcdoc resource</i>.<li><p>Set <var>element</var>'s <a href=#current-navigation-was-lazy-loaded id=the-iframe-element:current-navigation-was-lazy-loaded-2>current navigation was lazy loaded</a> boolean to
       true.<li><p><a id=the-iframe-element:start-intersection-observing-a-lazy-loading-element href=urls-and-fetching.html#start-intersection-observing-a-lazy-loading-element>Start intersection-observing a lazy loading element</a> for
       <var>element</var>.<li><p>Return.</ol>
     <li>
      <p><i>Navigate to the srcdoc resource</i>: <a href=#navigate-an-iframe-or-frame id=the-iframe-element:navigate-an-iframe-or-frame>Navigate an <code>iframe</code> or
      <code>frame</code></a> given <var>element</var>, <code id=the-iframe-element:about:srcdoc><a href=urls-and-fetching.html#about:srcdoc>about:srcdoc</a></code>, the empty
      string, and the value of <var>element</var>'s <code id=the-iframe-element:attr-iframe-srcdoc-13><a href=#attr-iframe-srcdoc>srcdoc</a></code>
      attribute.</p>

      <p>The resulting <code id=the-iframe-element:document-4><a href=dom.html#document>Document</a></code> must be considered <a href=#an-iframe-srcdoc-document id=the-iframe-element:an-iframe-srcdoc-document-3>an <code>iframe</code> <code>srcdoc</code> document</a>.</p>
     </ol>
   <li>
    <p>Otherwise:</p>

    <ol><li><p>Let <var>url</var> be the result of running the <a href=#shared-attribute-processing-steps-for-iframe-and-frame-elements id=the-iframe-element:shared-attribute-processing-steps-for-iframe-and-frame-elements>shared attribute processing steps
     for <code>iframe</code> and <code>frame</code> elements</a> given <var>element</var> and
     <var>initialInsertion</var>.<li><p>If <var>url</var> is null, then return.<li>
      <p>If <var>url</var> <a id=the-iframe-element:matches-about:blank href=urls-and-fetching.html#matches-about:blank>matches <code>about:blank</code></a> and
      <var>initialInsertion</var> is true, then:</p>

      <ol><li><p>Run the <a href=#iframe-load-event-steps id=the-iframe-element:iframe-load-event-steps>iframe load event steps</a> given <var>element</var>.<li><p>Return.</ol>
     <li><p>Let <var>referrerPolicy</var> be the current state of <var>element</var>'s <code id=the-iframe-element:attr-iframe-referrerpolicy-2><a href=#attr-iframe-referrerpolicy>referrerpolicy</a></code> content attribute.<li><p>Set <var>element</var>'s <a href=#current-navigation-was-lazy-loaded id=the-iframe-element:current-navigation-was-lazy-loaded-3>current navigation was lazy loaded</a> boolean to
     false.<li>
      <p>If the <a id=the-iframe-element:will-lazy-load-element-steps-2 href=urls-and-fetching.html#will-lazy-load-element-steps>will lazy load element steps</a> given <var>element</var> return true,
      then:</p>

      <ol><li><p>Set <var>element</var>'s <a id=the-iframe-element:lazy-load-resumption-steps-2 href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load resumption steps</a> to the rest of this
       algorithm starting with the step labeled <i>navigate</i>.<li><p>Set <var>element</var>'s <a href=#current-navigation-was-lazy-loaded id=the-iframe-element:current-navigation-was-lazy-loaded-4>current navigation was lazy loaded</a> boolean to
       true.<li><p><a id=the-iframe-element:start-intersection-observing-a-lazy-loading-element-2 href=urls-and-fetching.html#start-intersection-observing-a-lazy-loading-element>Start intersection-observing a lazy loading element</a> for
       <var>element</var>.<li><p>Return.</ol>
     <li><p><i>Navigate</i>: <a href=#navigate-an-iframe-or-frame id=the-iframe-element:navigate-an-iframe-or-frame-2>Navigate an <code>iframe</code> or <code>frame</code></a>
     given <var>element</var>, <var>url</var>, and <var>referrerPolicy</var>.</ol>
   </ol>

  <p id=otherwise-steps-for-iframe-or-frame-elements>The <dfn id=shared-attribute-processing-steps-for-iframe-and-frame-elements>shared attribute processing steps
  for <code>iframe</code> and <code>frame</code> elements</dfn>, given an element
  <var>element</var> and a boolean <var>initialInsertion</var>, are:</p>

  <ol><li><p>Let <var>url</var> be the <a id=the-iframe-element:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> <code id=the-iframe-element:about:blank><a href=infrastructure.html#about:blank>about:blank</a></code>.<li>
    <p>If <var>element</var> has a <code id=the-iframe-element:attr-iframe-src-5><a href=#attr-iframe-src>src</a></code> attribute specified,
    and its value is not the empty string, then:</p>

    <ol><li><p>Let <var>maybeURL</var> be the result of <a id=the-iframe-element:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given that
     attribute's value, relative to <var>element</var>'s <a id=the-iframe-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>maybeURL</var> is not failure, then set <var>url</var> to
     <var>maybeURL</var>.</ol>
   <li><p>If the <a id=the-iframe-element:inclusive-ancestor-navigables href=document-sequences.html#inclusive-ancestor-navigables>inclusive ancestor navigables</a> of <var>element</var>'s <a id=the-iframe-element:node-navigable href=document-sequences.html#node-navigable>node
   navigable</a> contains a <a id=the-iframe-element:navigable href=document-sequences.html#navigable>navigable</a> whose <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document>active
   document</a>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-iframe-element:the-document's-address-2" data-x-internal="the-document's-address">URL</a> <a href=https://url.spec.whatwg.org/#concept-url-equals id=the-iframe-element:concept-url-equals data-x-internal=concept-url-equals>equals</a> <var>url</var> with <i id=the-iframe-element:url-equals-exclude-fragments><a data-x-internal=url-equals-exclude-fragments href=https://url.spec.whatwg.org/#url-equals-exclude-fragments>exclude fragments</a></i> set to true, then return null.<li>
    <p>If <var>url</var> <a id=the-iframe-element:matches-about:blank-2 href=urls-and-fetching.html#matches-about:blank>matches <code>about:blank</code></a> and
    <var>initialInsertion</var> is true, then perform the <a id=the-iframe-element:url-and-history-update-steps href=browsing-the-web.html#url-and-history-update-steps>URL and history update steps</a>
    given <var>element</var>'s <a id=the-iframe-element:content-navigable-7 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-2>active
    document</a> and <var>url</var>.</p>

    <p class=note>This is necessary in case <var>url</var> is something like <code>about:blank?foo</code>. If <var>url</var> is just plain <code>about:blank</code>, this will do nothing.</p>
   <li><p>Return <var>url</var>.</ol>

  <p>To <dfn id=navigate-an-iframe-or-frame>navigate an <code>iframe</code> or <code>frame</code></dfn> given an element
  <var>element</var>, a <a id=the-iframe-element:url-3 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> <var>url</var>, a <a id=the-iframe-element:referrer-policy-2 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>
  <var>referrerPolicy</var>, an optional string-or-null <var>srcdocString</var> (default
  null), and an optional boolean <var>initialInsertion</var> (default false):</p>

  <ol><li><p>Let <var>historyHandling</var> be "<code id=the-iframe-element:navigationhistorybehavior-auto><a href=browsing-the-web.html#navigationhistorybehavior-auto>auto</a></code>".</p>

   <li><p>If <var>element</var>'s <a id=the-iframe-element:content-navigable-8 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-3>active document</a> is not <a id=the-iframe-element:completely-loaded href=document-lifecycle.html#completely-loaded>completely loaded</a>, then set
   <var>historyHandling</var> to "<code id=the-iframe-element:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".<li><p>If <var>element</var> is an <code id=the-iframe-element:the-iframe-element-11><a href=#the-iframe-element>iframe</a></code>, then set <var>element</var>'s <a href=#iframe-pending-resource-timing-start-time id=the-iframe-element:iframe-pending-resource-timing-start-time>pending resource-timing start time</a> to
   the <a id=the-iframe-element:current-high-resolution-time href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>element</var>'s
   <a id=the-iframe-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s <a id=the-iframe-element:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>.<li><p><a id=the-iframe-element:navigate href=browsing-the-web.html#navigate>Navigate</a> <var>element</var>'s <a id=the-iframe-element:content-navigable-9 href=document-sequences.html#content-navigable>content
   navigable</a> to <var>url</var> using <var>element</var>'s <a id=the-iframe-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, with
   <i id=the-iframe-element:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></i> set to <var>historyHandling</var>, <i id=the-iframe-element:navigation-referrer-policy><a href=browsing-the-web.html#navigation-referrer-policy>referrerPolicy</a></i> set to <var>referrerPolicy</var>, <i id=the-iframe-element:navigation-resource><a href=browsing-the-web.html#navigation-resource>documentResource</a></i> set to <var>srcdocString</var>, and <i id=the-iframe-element:navigation-initial-insertion><a href=browsing-the-web.html#navigation-initial-insertion>initialInsertion</a></i> set to <var>initialInsertion</var>.</ol>

  <p>Each <code id=the-iframe-element:document-5><a href=dom.html#document>Document</a></code> has an <dfn id=iframe-load-in-progress>iframe load in progress</dfn> flag and a <dfn id=mute-iframe-load>mute
  iframe load</dfn> flag. When a <code id=the-iframe-element:document-6><a href=dom.html#document>Document</a></code> is created, these flags must be unset for
  that <code id=the-iframe-element:document-7><a href=dom.html#document>Document</a></code>.</p>

  <p>To run the <dfn id=iframe-load-event-steps>iframe load event steps</dfn>, given an <code id=the-iframe-element:the-iframe-element-12><a href=#the-iframe-element>iframe</a></code> element
  <var>element</var>:</p>

  <ol><li><p><a id=the-iframe-element:assert href=https://infra.spec.whatwg.org/#assert data-x-internal=assert>Assert</a>: <var>element</var>'s <a id=the-iframe-element:content-navigable-10 href=document-sequences.html#content-navigable>content navigable</a> is not
   null.<li><p>Let <var>childDocument</var> be <var>element</var>'s <a id=the-iframe-element:content-navigable-11 href=document-sequences.html#content-navigable>content navigable</a>'s
   <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-4>active document</a>.<li><p>If <var>childDocument</var> has its <a href=#mute-iframe-load id=the-iframe-element:mute-iframe-load>mute iframe load</a> flag set, then
   return.<li>
    <p>If <var>element</var>'s <a href=#iframe-pending-resource-timing-start-time id=the-iframe-element:iframe-pending-resource-timing-start-time-2>pending resource-timing start time</a> is
    not null, then:</p>

    <ol><li><p>Let <var>global</var> be <var>element</var>'s <a id=the-iframe-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
      <a id=the-iframe-element:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global object</a>.<li><p>Let <var>fallbackTimingInfo</var> be a new <a href=https://fetch.spec.whatwg.org/#fetch-timing-info id=the-iframe-element:fetch-timing-info data-x-internal=fetch-timing-info>fetch timing info</a> whose <a href=https://fetch.spec.whatwg.org/#fetch-timing-info-start-time id=the-iframe-element:fetch-timing-info-start-time data-x-internal=fetch-timing-info-start-time>start time</a> is <var>element</var>'s <a href=#iframe-pending-resource-timing-start-time id=the-iframe-element:iframe-pending-resource-timing-start-time-3>pending resource-timing start time</a>
      and whose <a href=https://fetch.spec.whatwg.org/#fetch-timing-info-end-time id=the-iframe-element:fetch-timing-info-end-time data-x-internal=fetch-timing-info-end-time>response end time</a> is the
      <a id=the-iframe-element:current-high-resolution-time-2 href=https://w3c.github.io/hr-time/#dfn-current-high-resolution-time data-x-internal=current-high-resolution-time>current high resolution time</a> given <var>global</var>.<li><p><a id=the-iframe-element:mark-resource-timing href=https://w3c.github.io/resource-timing/#dfn-mark-resource-timing data-x-internal=mark-resource-timing>Mark resource timing</a> given <var>fallbackTimingInfo</var>, <var>url</var>,
      "<code id=the-iframe-element:the-iframe-element-13><a href=#the-iframe-element>iframe</a></code>", <var>global</var>, the empty string, a new
      <a href=https://fetch.spec.whatwg.org/#response-body-info id=the-iframe-element:response-body-info data-x-internal=response-body-info>response body info</a>, and 0.<li><p>Set <var>element</var>'s <a href=#iframe-pending-resource-timing-start-time id=the-iframe-element:iframe-pending-resource-timing-start-time-4>pending resource-timing start time</a>
      to null.</ol>
   <li><p>Set <var>childDocument</var>'s <a href=#iframe-load-in-progress id=the-iframe-element:iframe-load-in-progress>iframe load in progress</a> flag.<li><p><a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-iframe-element:concept-event-fire data-x-internal=concept-event-fire>Fire an event</a> named <code id=the-iframe-element:event-load><a href=indices.html#event-load>load</a></code> at <var>element</var>.<li><p>Unset <var>childDocument</var>'s <a href=#iframe-load-in-progress id=the-iframe-element:iframe-load-in-progress-2>iframe load in progress</a> flag.</ol>

  <p class=warning>This, in conjunction with scripting, can be used to probe the URL space of the
  local network's HTTP servers. User agents may implement <a href=browsers.html#concept-origin id=the-iframe-element:concept-origin>cross-origin</a>
  access control policies that are stricter than those described above to mitigate this attack, but
  unfortunately such policies are typically not compatible with existing web content.</p>

  <p>If an element type <dfn id=potentially-delays-the-load-event>potentially delays the load event</dfn>, then for each element
  <var>element</var> of that type, the user agent must <a id=the-iframe-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of
  <var>element</var>'s <a id=the-iframe-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> if <var>element</var>'s <a id=the-iframe-element:content-navigable-12 href=document-sequences.html#content-navigable>content
  navigable</a> is non-null and any of the following are true:</p>

  <ul><li><p><var>element</var>'s <a id=the-iframe-element:content-navigable-13 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-5>active
   document</a> is not <a id=the-iframe-element:ready-for-post-load-tasks href=parsing.html#ready-for-post-load-tasks>ready for post-load tasks</a>;<li><p><var>element</var>'s <a id=the-iframe-element:content-navigable-14 href=document-sequences.html#content-navigable>content navigable</a>'s <a id=the-iframe-element:delaying-load-events-mode href=document-sequences.html#delaying-load-events-mode>is delaying <code>load</code> events</a> is true; or<li><p>anything is <a href=parsing.html#delay-the-load-event id=the-iframe-element:delay-the-load-event-2>delaying the load event</a> of
   <var>element</var>'s <a id=the-iframe-element:content-navigable-15 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-6>active
   document</a>.</ul>

  <p class=note>If, during the handling of the <code id=the-iframe-element:event-load-2><a href=indices.html#event-load>load</a></code> event,
  <var>element</var>'s <a id=the-iframe-element:content-navigable-16 href=document-sequences.html#content-navigable>content navigable</a> is again <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-2>navigated</a>, that will further <a id=the-iframe-element:delay-the-load-event-3 href=parsing.html#delay-the-load-event>delay the load event</a>.</p>

  <p>Each <code id=the-iframe-element:the-iframe-element-14><a href=#the-iframe-element>iframe</a></code> element has an associated <dfn id=current-navigation-was-lazy-loaded>current navigation was lazy
  loaded</dfn> boolean, initially false. It is set and unset in the <a href=#process-the-iframe-attributes id=the-iframe-element:process-the-iframe-attributes-4>process the
  <code>iframe</code> attributes</a> algorithm.</p>

  <p>An <code id=the-iframe-element:the-iframe-element-15><a href=#the-iframe-element>iframe</a></code> element whose <a href=#current-navigation-was-lazy-loaded id=the-iframe-element:current-navigation-was-lazy-loaded-5>current navigation was lazy loaded</a> boolean is
  false <a href=#potentially-delays-the-load-event id=the-iframe-element:potentially-delays-the-load-event>potentially delays the load event</a>.</p>

  <p>Each <code id=the-iframe-element:the-iframe-element-16><a href=#the-iframe-element>iframe</a></code> element has an associated null or
  <a id=the-iframe-element:domhighrestimestamp href=https://w3c.github.io/hr-time/#dom-domhighrestimestamp data-x-internal=domhighrestimestamp><code>DOMHighResTimeStamp</code></a> <dfn id=iframe-pending-resource-timing-start-time>pending resource-timing start time</dfn>,
  initially set to null.</p>
  

  

  <p class=note>If, when the element is created, the <code id=the-iframe-element:attr-iframe-srcdoc-14><a href=#attr-iframe-srcdoc>srcdoc</a></code> attribute is not set, and the <code id=the-iframe-element:attr-iframe-src-6><a href=#attr-iframe-src>src</a></code> attribute is either also not set or set but its value cannot
  be <a href=urls-and-fetching.html#encoding-parsing-a-url id=the-iframe-element:encoding-parsing-a-url-2>parsed</a>, the element's <a id=the-iframe-element:content-navigable-17 href=document-sequences.html#content-navigable>content
  navigable</a> will remain at the <a href=dom.html#is-initial-about:blank id=the-iframe-element:is-initial-about:blank>initial
  <code>about:blank</code></a> <code id=the-iframe-element:document-8><a href=dom.html#document>Document</a></code>.</p>

  <p class=note>If the user <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-3>navigates</a> away from this page, the
  <code id=the-iframe-element:the-iframe-element-17><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:content-navigable-18 href=document-sequences.html#content-navigable>content navigable</a>'s <a href=document-sequences.html#nav-wp id=the-iframe-element:nav-wp>active
  <code>WindowProxy</code></a> object will proxy new <code id=the-iframe-element:window><a href=nav-history-apis.html#window>Window</a></code> objects for new
  <code id=the-iframe-element:document-9><a href=dom.html#document>Document</a></code> objects, but the <code id=the-iframe-element:attr-iframe-src-7><a href=#attr-iframe-src>src</a></code> attribute will
  not change.</p>


  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-name data-dfn-type=element-attr><code>name</code></dfn>
  attribute, if present, must be a <a id=the-iframe-element:valid-navigable-target-name href=document-sequences.html#valid-navigable-target-name>valid navigable target name</a>. The given value is
  used to name the element's <a id=the-iframe-element:content-navigable-19 href=document-sequences.html#content-navigable>content navigable</a> if present when that is <a href=document-sequences.html#create-a-new-child-navigable id=the-iframe-element:create-a-new-child-navigable-2>created</a>.</p>


  <hr> 

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox title="The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.">Element/iframe#attr-sandbox</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>17+</span></span><span class="safari yes"><span>Safari</span><span>5+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>10+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=iframe id=attr-iframe-sandbox data-dfn-type=element-attr><code>sandbox</code></dfn>
  attribute, when specified, enables a set of extra restrictions on any content hosted by the
  <code id=the-iframe-element:the-iframe-element-18><a href=#the-iframe-element>iframe</a></code>. Its value must be an <a id=the-iframe-element:unordered-set-of-unique-space-separated-tokens href=common-microsyntaxes.html#unordered-set-of-unique-space-separated-tokens>unordered set of unique space-separated
  tokens</a> that are <a id=the-iframe-element:ascii-case-insensitive href=https://infra.spec.whatwg.org/#ascii-case-insensitive data-x-internal=ascii-case-insensitive>ASCII case-insensitive</a>. The allowed values are:</p>

  <ul class=brief><li><code id=the-iframe-element:attr-iframe-sandbox-allow-downloads><a href=browsers.html#attr-iframe-sandbox-allow-downloads>allow-downloads</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-forms><a href=browsers.html#attr-iframe-sandbox-allow-forms>allow-forms</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-modals><a href=browsers.html#attr-iframe-sandbox-allow-modals>allow-modals</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-orientation-lock><a href=browsers.html#attr-iframe-sandbox-allow-orientation-lock>allow-orientation-lock</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-pointer-lock><a href=browsers.html#attr-iframe-sandbox-allow-pointer-lock>allow-pointer-lock</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-popups><a href=browsers.html#attr-iframe-sandbox-allow-popups>allow-popups</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-popups-to-escape-sandbox><a href=browsers.html#attr-iframe-sandbox-allow-popups-to-escape-sandbox>allow-popups-to-escape-sandbox</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-presentation><a href=browsers.html#attr-iframe-sandbox-allow-presentation>allow-presentation</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-scripts><a href=browsers.html#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-by-user-activation><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-by-user-activation>allow-top-navigation-by-user-activation</a></code><li><code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-to-custom-protocols><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-to-custom-protocols>allow-top-navigation-to-custom-protocols</a></code></ul>

  <p>When the attribute is set, the content is treated as being from a unique <a href=browsers.html#concept-origin-opaque id=the-iframe-element:concept-origin-opaque>opaque origin</a>, forms, scripts, and various potentially
  annoying APIs are disabled, and links are prevented from targeting other <a href=document-sequences.html#navigable id=the-iframe-element:navigable-2>navigables</a>. The <code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin-2><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code> keyword causes the
  content to be treated as being from its real origin instead of forcing it into an <a href=browsers.html#concept-origin-opaque id=the-iframe-element:concept-origin-opaque-2>opaque origin</a>; the <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-2><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code> keyword allows the
  content to <a id=the-iframe-element:navigate-4 href=browsing-the-web.html#navigate>navigate</a> its <a href=document-sequences.html#nav-traversable id=the-iframe-element:nav-traversable>traversable navigable</a>;
  the <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-by-user-activation-2><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-by-user-activation>allow-top-navigation-by-user-activation</a></code>
  keyword behaves similarly but allows such <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-5>navigation</a> only when the
  browsing context's <a href=document-sequences.html#nav-window id=the-iframe-element:nav-window>active window</a> has <a id=the-iframe-element:transient-activation href=interaction.html#transient-activation>transient
  activation</a>; the <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-to-custom-protocols-2><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-to-custom-protocols>allow-top-navigation-to-custom-protocols</a></code>
  reenables navigations toward non <a id=the-iframe-element:fetch-scheme href=https://fetch.spec.whatwg.org/#fetch-scheme data-x-internal=fetch-scheme>fetch scheme</a> to be <a href=browsing-the-web.html#hand-off-to-external-software id=the-iframe-element:hand-off-to-external-software>handed off to external software</a>; and the <code id=the-iframe-element:attr-iframe-sandbox-allow-forms-2><a href=browsers.html#attr-iframe-sandbox-allow-forms>allow-forms</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-modals-2><a href=browsers.html#attr-iframe-sandbox-allow-modals>allow-modals</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-orientation-lock-2><a href=browsers.html#attr-iframe-sandbox-allow-orientation-lock>allow-orientation-lock</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-pointer-lock-2><a href=browsers.html#attr-iframe-sandbox-allow-pointer-lock>allow-pointer-lock</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-popups-2><a href=browsers.html#attr-iframe-sandbox-allow-popups>allow-popups</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-presentation-2><a href=browsers.html#attr-iframe-sandbox-allow-presentation>allow-presentation</a></code>, <code id=the-iframe-element:attr-iframe-sandbox-allow-scripts-2><a href=browsers.html#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code>, and <code id=the-iframe-element:attr-iframe-sandbox-allow-popups-to-escape-sandbox-2><a href=browsers.html#attr-iframe-sandbox-allow-popups-to-escape-sandbox>allow-popups-to-escape-sandbox</a></code>
  keywords re-enable forms, modal dialogs, screen orientation lock, the pointer lock API, popups,
  the presentation API, scripts, and the creation of unsandboxed <a href=document-sequences.html#auxiliary-browsing-context id=the-iframe-element:auxiliary-browsing-context>auxiliary browsing contexts</a> respectively. The <code id=the-iframe-element:attr-iframe-sandbox-allow-downloads-2><a href=browsers.html#attr-iframe-sandbox-allow-downloads>allow-downloads</a></code> keyword allows content to
  perform downloads. <a href=references.html#refsPOINTERLOCK>[POINTERLOCK]</a> <a href=references.html#refsSCREENORIENTATION>[SCREENORIENTATION]</a> <a href=references.html#refsPRESENTATION>[PRESENTATION]</a></p>

  <p>The <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-3><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code> and <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-by-user-activation-3><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-by-user-activation>allow-top-navigation-by-user-activation</a></code>
  keywords must not both be specified, as doing so is redundant; only <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-4><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code> will have an effect
  in such non-conformant markup.</p>

  <p>Similarly, the <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-to-custom-protocols-3><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation-to-custom-protocols>allow-top-navigation-to-custom-protocols</a></code>
  keyword must not be specified if either <code id=the-iframe-element:attr-iframe-sandbox-allow-top-navigation-5><a href=browsers.html#attr-iframe-sandbox-allow-top-navigation>allow-top-navigation</a></code> or <code id=the-iframe-element:attr-iframe-sandbox-allow-popups-3><a href=browsers.html#attr-iframe-sandbox-allow-popups>allow-popups</a></code> are specified, as doing so is
  redundant.</p>

  <p class=note>To allow <code id=the-iframe-element:dom-alert><a href=timers-and-user-prompts.html#dom-alert>alert()</a></code>, <code id=the-iframe-element:dom-confirm><a href=timers-and-user-prompts.html#dom-confirm>confirm()</a></code>, and <code id=the-iframe-element:dom-prompt><a href=timers-and-user-prompts.html#dom-prompt>prompt()</a></code> inside
  sandboxed content, both the <code id=the-iframe-element:attr-iframe-sandbox-allow-modals-3><a href=browsers.html#attr-iframe-sandbox-allow-modals>allow-modals</a></code>
  and <code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin-3><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code> keywords need to
  be specified, and the loaded URL needs to be <a id=the-iframe-element:same-origin href=browsers.html#same-origin>same origin</a> with the <a id=the-iframe-element:concept-environment-top-level-origin href=webappapis.html#concept-environment-top-level-origin>top-level
  origin</a>. Without the <code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin-4><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code> keyword, the content is
  always treated as cross-origin, and cross-origin content <a id=the-iframe-element:cannot-show-simple-dialogs href=timers-and-user-prompts.html#cannot-show-simple-dialogs>cannot show simple
  dialogs</a>.</p>

  <p class=warning>Setting both the <code id=the-iframe-element:attr-iframe-sandbox-allow-scripts-3><a href=browsers.html#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code> and <code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin-5><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code> keywords together when the
  embedded page has the <a id=the-iframe-element:same-origin-2 href=browsers.html#same-origin>same origin</a> as the page containing the <code id=the-iframe-element:the-iframe-element-19><a href=#the-iframe-element>iframe</a></code>
  allows the embedded page to simply remove the <code id=the-iframe-element:attr-iframe-sandbox-5><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute and then reload itself, effectively breaking out of the sandbox altogether.</p>

  <p class=warning>These flags only take effect when the <a id=the-iframe-element:content-navigable-20 href=document-sequences.html#content-navigable>content navigable</a> of the
  <code id=the-iframe-element:the-iframe-element-20><a href=#the-iframe-element>iframe</a></code> element is <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-6>navigated</a>. Removing them, or
  removing the entire <code id=the-iframe-element:attr-iframe-sandbox-6><a href=#attr-iframe-sandbox>sandbox</a></code> attribute, has no effect on
  an already-loaded page.</p>

  <p class=warning>Potentially hostile files should not be served from the same server as the file
  containing the <code id=the-iframe-element:the-iframe-element-21><a href=#the-iframe-element>iframe</a></code> element. Sandboxing hostile content is of minimal help if an
  attacker can convince the user to just visit the hostile content directly, rather than in the
  <code id=the-iframe-element:the-iframe-element-22><a href=#the-iframe-element>iframe</a></code>. To limit the damage that can be caused by hostile HTML content, it should be
  served from a separate dedicated domain. Using a different domain ensures that scripts in the
  files are unable to attack the site, even if the user is tricked into visiting those pages
  directly, without the protection of the <code id=the-iframe-element:attr-iframe-sandbox-7><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute.</p>

  

  

  <p>When an <code id=the-iframe-element:the-iframe-element-23><a href=#the-iframe-element>iframe</a></code> element's <code id=the-iframe-element:attr-iframe-sandbox-8><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute is set or changed while it has a non-null <a id=the-iframe-element:content-navigable-21 href=document-sequences.html#content-navigable>content navigable</a>, the user
  agent must <a href=browsers.html#parse-a-sandboxing-directive id=the-iframe-element:parse-a-sandboxing-directive-2>parse the sandboxing directive</a>
  given the attribute's value and the <code id=the-iframe-element:the-iframe-element-24><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:iframe-sandboxing-flag-set-2 href=browsers.html#iframe-sandboxing-flag-set><code>iframe</code>
  sandboxing flag set</a>.</p>

  <p>When an <code id=the-iframe-element:the-iframe-element-25><a href=#the-iframe-element>iframe</a></code> element's <code id=the-iframe-element:attr-iframe-sandbox-9><a href=#attr-iframe-sandbox>sandbox</a></code>
  attribute is removed while it has a non-null <a id=the-iframe-element:content-navigable-22 href=document-sequences.html#content-navigable>content navigable</a>, the user agent must
  empty the <code id=the-iframe-element:the-iframe-element-26><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:iframe-sandboxing-flag-set-3 href=browsers.html#iframe-sandboxing-flag-set><code>iframe</code> sandboxing flag set</a>.</p>

  

  <div class=example>

   <p>In this example, some completely-unknown, potentially hostile, user-provided HTML content is
   embedded in a page. Because it is served from a separate domain, it is affected by all the normal
   cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled,
   forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or
   windows it itself embeds).</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->We&apos;re not scared of you! Here is your content, unedited:<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://usercontent.example.net/getusercontent.cgi?id=12193&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p class=warning>It is important to use a separate domain so that if the attacker convinces the
   user to visit that page directly, the page doesn't run in the context of the site's origin, which
   would make the user vulnerable to any attack found in the page.</p>

  </div>

  <div class=example>

   <p>In this example, a gadget from another site is embedded. The gadget has scripting and forms
   enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with
   its originating server. The sandbox is still useful, however, as it disables plugins and popups,
   thus reducing the risk of the user being exposed to malware and other annoyances.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-same-origin allow-forms allow-scripts&quot;</c->
        <c- e>src</c-><c- o>=</c-><c- s>&quot;https://maps.example.com/embedded.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

  </div>

  <div class=example>

   <p>Suppose a file A contained the following fragment:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-same-origin allow-forms&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>B</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p>Suppose that file B contained an iframe also:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>sandbox</c-><c- o>=</c-><c- s>&quot;allow-scripts&quot;</c-> <c- e>src</c-><c- o>=</c-><c- s>C</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

   <p>Further, suppose that file C contained a link:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>D</c-><c- p>&gt;</c->Link<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-></code></pre>

   <p>For this example, suppose all the files were served as <code id=the-iframe-element:text/html><a href=iana.html#text/html>text/html</a></code>.</p>

   <p>Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the
   <code id=the-iframe-element:the-iframe-element-27><a href=#the-iframe-element>iframe</a></code> in A has scripts disabled, and this overrides the <code id=the-iframe-element:attr-iframe-sandbox-allow-scripts-4><a href=browsers.html#attr-iframe-sandbox-allow-scripts>allow-scripts</a></code> keyword set on the
   <code id=the-iframe-element:the-iframe-element-28><a href=#the-iframe-element>iframe</a></code> in B. Forms are also disabled, because the inner <code id=the-iframe-element:the-iframe-element-29><a href=#the-iframe-element>iframe</a></code> (in B)
   does not have the <code id=the-iframe-element:attr-iframe-sandbox-allow-forms-3><a href=browsers.html#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keyword
   set.</p>

   <p>Suppose now that a script in A removes all the <code id=the-iframe-element:attr-iframe-sandbox-10><a href=#attr-iframe-sandbox>sandbox</a></code> attributes in A  and B.
   This would change nothing immediately. If the user clicked the link in C, loading page D into
   the <code id=the-iframe-element:the-iframe-element-30><a href=#the-iframe-element>iframe</a></code> in B, page D would now act as if the <code id=the-iframe-element:the-iframe-element-31><a href=#the-iframe-element>iframe</a></code> in B had the
   <code id=the-iframe-element:attr-iframe-sandbox-allow-same-origin-6><a href=browsers.html#attr-iframe-sandbox-allow-same-origin>allow-same-origin</a></code> and <code id=the-iframe-element:attr-iframe-sandbox-allow-forms-4><a href=browsers.html#attr-iframe-sandbox-allow-forms>allow-forms</a></code> keywords set, because that was the
   state of the <a id=the-iframe-element:content-navigable-23 href=document-sequences.html#content-navigable>content navigable</a> in the <code id=the-iframe-element:the-iframe-element-32><a href=#the-iframe-element>iframe</a></code> in A when page B was
   loaded.</p>

   <p>Generally speaking, dynamically removing or changing the <code id=the-iframe-element:attr-iframe-sandbox-11><a href=#attr-iframe-sandbox>sandbox</a></code> attribute is ill-advised, because it can make it quite
   hard to reason about what will be allowed and what will not.</p>

  </div>


  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-allow data-dfn-type=element-attr><code>allow</code></dfn>
  attribute, when specified, determines the <a href=https://w3c.github.io/webappsec-feature-policy/#container-policy id=the-iframe-element:concept-container-policy data-x-internal=concept-container-policy>container
  policy</a> that will be used when the <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy>permissions policy</a> for a
  <code id=the-iframe-element:document-10><a href=dom.html#document>Document</a></code> in the <code id=the-iframe-element:the-iframe-element-33><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:content-navigable-24 href=document-sequences.html#content-navigable>content navigable</a> is initialized.
  Its value must be a <a href=https://w3c.github.io/webappsec-feature-policy/#serialized-permissions-policy id=the-iframe-element:concept-serialized-permissions-policy data-x-internal=concept-serialized-permissions-policy>serialized permissions
  policy</a>. <a href=references.html#refsPERMISSIONSPOLICY>[PERMISSIONSPOLICY]</a></p>

  <div class=example>
   <p>In this example, an <code id=the-iframe-element:the-iframe-element-34><a href=#the-iframe-element>iframe</a></code> is used to embed a map from an online navigation
   service. The <code id=the-iframe-element:attr-iframe-allow-2><a href=#attr-iframe-allow>allow</a></code> attribute is used to enable the
   Geolocation API within the nested context.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://maps.example.com/&quot;</c-> <c- e>allow</c-><c- o>=</c-><c- s>&quot;geolocation&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-allowfullscreen data-dfn-type=element-attr><code>allowfullscreen</code></dfn> attribute is a <a id=the-iframe-element:boolean-attribute href=common-microsyntaxes.html#boolean-attribute>boolean
  attribute</a>. When specified, it indicates that <code id=the-iframe-element:document-11><a href=dom.html#document>Document</a></code> objects in the
  <code id=the-iframe-element:the-iframe-element-35><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:content-navigable-25 href=document-sequences.html#content-navigable>content navigable</a> will be initialized with a <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy-2>permissions policy</a> which allows the "<code>fullscreen</code>" feature to be used from any <a id=the-iframe-element:concept-origin-2 href=browsers.html#concept-origin>origin</a>. This is enforced by
  the <a href=https://w3c.github.io/webappsec-feature-policy/#process-permissions-policy-attributes id=the-iframe-element:process-permissions-policy-attributes data-x-internal=process-permissions-policy-attributes>process permissions policy
  attributes</a> algorithm. <a href=references.html#refsPERMISSIONSPOLICY>[PERMISSIONSPOLICY]</a></p>

  <div class=example>

   <p>Here, an <code id=the-iframe-element:the-iframe-element-36><a href=#the-iframe-element>iframe</a></code> is used to embed a player from a video site. The <code id=the-iframe-element:attr-iframe-allowfullscreen-2><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attribute is needed to enable the
   player to show its video fullscreen.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>article</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>header</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>img</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;/usericons/1627591962735&quot;</c-><c- p>&gt;</c-> <c- p>&lt;</c-><c- f>b</c-><c- p>&gt;</c->Fred Flintstone<c- p>&lt;/</c-><c- f>b</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
  <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;/posts/3095182851&quot;</c-> <c- e>rel</c-><c- o>=</c-><c- s>bookmark</c-><c- p>&gt;</c->12:44<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;</c-> — <c- p>&lt;</c-><c- f>a</c-> <c- e>href</c-><c- o>=</c-><c- s>&quot;#acl-3095182851&quot;</c-><c- p>&gt;</c->Private Post<c- p>&lt;/</c-><c- f>a</c-><c- p>&gt;&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <c- p>&lt;/</c-><c- f>header</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->Check out my new ride!<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
 <strong><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://video.example.com/embed?id=92469812&quot;</c-> <c- e>allowfullscreen</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></strong>
<c- p>&lt;/</c-><c- f>article</c-><c- p>&gt;</c-></code></pre>

  </div>

  <p class=note>Neither <code id=the-iframe-element:attr-iframe-allow-3><a href=#attr-iframe-allow>allow</a></code> nor <code id=the-iframe-element:attr-iframe-allowfullscreen-3><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> can grant access to a feature in an
  <code id=the-iframe-element:the-iframe-element-37><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:content-navigable-26 href=document-sequences.html#content-navigable>content navigable</a> if the element's <a id=the-iframe-element:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
  document</a> is not already allowed to use that feature.</p>

  
   <p id=fullscreen-logic>To determine whether a <code id=the-iframe-element:document-12><a href=dom.html#document>Document</a></code> object <var>document</var>
   is <dfn id=allowed-to-use data-export="">allowed to use</dfn> the policy-controlled-feature <var>feature</var>, run these
   steps:</p>

   <ol><li><p>If <var>document</var>'s <a href=document-sequences.html#concept-document-bc id=the-iframe-element:concept-document-bc>browsing context</a> is
    null, then return false.<li><p>If <var>document</var> is not <a id=the-iframe-element:fully-active href=document-sequences.html#fully-active>fully active</a>, then return false.<li><p>If the result of running <a href=https://w3c.github.io/webappsec-feature-policy/#is-feature-enabled id=the-iframe-element:is-feature-enabled data-x-internal=is-feature-enabled>is feature enabled in document
    for origin</a> on <var>feature</var>, <var>document</var>, and <var>document</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-iframe-element:concept-document-origin data-x-internal=concept-document-origin>origin</a> is "<code>Enabled</code>", then return
    true.<li><p>Return false.</ol>
  

  <p class=warning>Because they only influence the <a href=dom.html#concept-document-permissions-policy id=the-iframe-element:concept-document-permissions-policy-3>permissions policy</a> of the <a id=the-iframe-element:content-navigable-27 href=document-sequences.html#content-navigable>content
  navigable</a>'s <a href=document-sequences.html#nav-document id=the-iframe-element:nav-document-7>active document</a>, the <code id=the-iframe-element:attr-iframe-allow-4><a href=#attr-iframe-allow>allow</a></code> and <code id=the-iframe-element:attr-iframe-allowfullscreen-4><a href=#attr-iframe-allowfullscreen>allowfullscreen</a></code> attributes only take effect when the
  <a id=the-iframe-element:content-navigable-28 href=document-sequences.html#content-navigable>content navigable</a> of the <code id=the-iframe-element:the-iframe-element-38><a href=#the-iframe-element>iframe</a></code> is <a href=browsing-the-web.html#navigate id=the-iframe-element:navigate-7>navigated</a>. Adding or removing them has no effect on an already-loaded
  document.</p>


  <hr> 

  <p>The <code id=the-iframe-element:the-iframe-element-39><a href=#the-iframe-element>iframe</a></code> element supports <a id=the-iframe-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a> for cases where the
  embedded content has specific dimensions (e.g. ad units have well-defined dimensions).</p>

  <p>An <code id=the-iframe-element:the-iframe-element-40><a href=#the-iframe-element>iframe</a></code> element never has <a id=the-iframe-element:fallback-content href=dom.html#fallback-content>fallback content</a>, as it will always
  <a id=the-iframe-element:create-a-new-child-navigable-3 href=document-sequences.html#create-a-new-child-navigable>create a new child navigable</a>, regardless of whether the specified initial
  contents are successfully used.</p>

  <hr> 

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-referrerpolicy data-dfn-type=element-attr><code>referrerpolicy</code></dfn> attribute is a
  <a id=the-iframe-element:referrer-policy-attribute href=urls-and-fetching.html#referrer-policy-attribute>referrer policy attribute</a>. Its purpose is to set the <a id=the-iframe-element:referrer-policy-3 href=https://w3c.github.io/webappsec-referrer-policy/#referrer-policy data-x-internal=referrer-policy>referrer policy</a>
  used when <a href=#process-the-iframe-attributes id=the-iframe-element:process-the-iframe-attributes-5>processing the <code>iframe</code>
  attributes</a>. <a href=references.html#refsREFERRERPOLICY>[REFERRERPOLICY]</a></p>

  <p>The <dfn data-dfn-for=iframe id=attr-iframe-loading data-dfn-type=element-attr><code>loading</code></dfn> attribute is a <a id=the-iframe-element:lazy-loading-attribute href=urls-and-fetching.html#lazy-loading-attribute>lazy
  loading attribute</a>. Its purpose is to indicate the policy for loading <code id=the-iframe-element:the-iframe-element-41><a href=#the-iframe-element>iframe</a></code>
  elements that are outside the viewport.</p>

  <p>When the <code id=the-iframe-element:attr-iframe-loading-2><a href=#attr-iframe-loading>loading</a></code> attribute's state is changed to the
  <a href=urls-and-fetching.html#attr-loading-eager-state id=the-iframe-element:attr-loading-eager-state>Eager</a> state, the user agent must run these
  steps:</p>

  <ol><li><p>Let <var>resumptionSteps</var> be the <code id=the-iframe-element:the-iframe-element-42><a href=#the-iframe-element>iframe</a></code> element's <a id=the-iframe-element:lazy-load-resumption-steps-3 href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load
   resumption steps</a>.<li><p>If <var>resumptionSteps</var> is null, then return.<li><p>Set the <code id=the-iframe-element:the-iframe-element-43><a href=#the-iframe-element>iframe</a></code>'s <a id=the-iframe-element:lazy-load-resumption-steps-4 href=urls-and-fetching.html#lazy-load-resumption-steps>lazy load resumption steps</a> to null.<li><p>Invoke <var>resumptionSteps</var>.</ol>

  <hr> 

  <p>Descendants of <code id=the-iframe-element:the-iframe-element-44><a href=#the-iframe-element>iframe</a></code> elements represent nothing. (In legacy user agents that do
  not support <code id=the-iframe-element:the-iframe-element-45><a href=#the-iframe-element>iframe</a></code> elements, the contents would be parsed as markup that could act as
  fallback content.)</p>

  <p class=note>The <a id=the-iframe-element:html-parser href=parsing.html#html-parser>HTML parser</a> treats markup inside <code id=the-iframe-element:the-iframe-element-46><a href=#the-iframe-element>iframe</a></code> elements as
  text.</p>


  

  <hr> 

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc title="The srcdoc property of the HTMLIFrameElement specifies the content of the page.">HTMLIFrameElement/srcdoc</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>25+</span></span><span class="safari yes"><span>Safari</span><span>6+</span></span><span class="chrome yes"><span>Chrome</span><span>20+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLIFrameElement id=dom-iframe-srcdoc data-dfn-type=attribute><code>srcdoc</code></dfn> getter steps are:</p>

  <ol><li><p>Let <var>attribute</var> be the result of running <a href=https://dom.spec.whatwg.org/#concept-element-attributes-get-by-namespace id=the-iframe-element:concept-element-attributes-get-by-namespace data-x-internal=concept-element-attributes-get-by-namespace>get an attribute by namespace and local
   name</a> given null, <code id=the-iframe-element:attr-iframe-srcdoc-15><a href=#attr-iframe-srcdoc>srcdoc</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-local-name id=the-iframe-element:concept-attribute-local-name data-x-internal=concept-attribute-local-name>local name</a>, and <a id=the-iframe-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p>If <var>attribute</var> is null, then return the empty string.<li><p>Return <var>attribute</var>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-value id=the-iframe-element:concept-attribute-value data-x-internal=concept-attribute-value>value</a>.</ol>

  <p>The <code id=the-iframe-element:dom-iframe-srcdoc-2><a href=#dom-iframe-srcdoc>srcdoc</a></code> setter steps
  are:</p>

  <ol><li><p>Let <var>compliantString</var> be the result of invoking the <a href=https://w3c.github.io/trusted-types/dist/spec/#get-trusted-type-compliant-string-algorithm id=the-iframe-element:tt-getcompliantstring data-x-internal=tt-getcompliantstring>Get Trusted Type compliant string</a> algorithm with <code id=the-iframe-element:tt-trustedhtml-2><a data-x-internal=tt-trustedhtml href=https://w3c.github.io/trusted-types/dist/spec/#trustedhtml>TrustedHTML</a></code>, <a id=the-iframe-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-iframe-element:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global
   object</a>, the given value, "<code>HTMLIFrameElement srcdoc</code>", and "<code>script</code>".<li><p><a href=https://dom.spec.whatwg.org/#concept-element-attributes-set-value id=the-iframe-element:concept-element-attributes-set-value data-x-internal=concept-element-attributes-set-value>Set an attribute value</a> given
   <a id=the-iframe-element:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>, <code id=the-iframe-element:attr-iframe-srcdoc-16><a href=#attr-iframe-srcdoc>srcdoc</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-attribute-local-name id=the-iframe-element:concept-attribute-local-name-2 data-x-internal=concept-attribute-local-name>local name</a>, and
   <var>compliantString</var>.</ol>

  <p>The <a href=https://dom.spec.whatwg.org/#concept-supported-tokens id=the-iframe-element:concept-supported-tokens data-x-internal=concept-supported-tokens>supported tokens</a> for <code id=the-iframe-element:dom-iframe-sandbox><a href=#dom-iframe-sandbox>sandbox</a></code>'s <code id=the-iframe-element:domtokenlist-2><a data-x-internal=domtokenlist href=https://dom.spec.whatwg.org/#interface-domtokenlist>DOMTokenList</a></code> are the allowed
  values defined in the <code id=the-iframe-element:attr-iframe-sandbox-12><a href=#attr-iframe-sandbox>sandbox</a></code> attribute and supported by
  the user agent.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy title="The HTMLIFrameElement.referrerPolicy property reflects the HTML referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.">HTMLIFrameElement/referrerPolicy</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>50+</span></span><span class="safari yes"><span>Safari</span><span>14+</span></span><span class="chrome yes"><span>Chrome</span><span>52+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge unknown"><span>Edge (Legacy)</span><span>?</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLIFrameElement id=dom-iframe-referrerpolicy data-dfn-type=attribute><code>referrerPolicy</code></dfn> IDL attribute must
  <a id=the-iframe-element:reflect href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-iframe-element:attr-iframe-referrerpolicy-3><a href=#attr-iframe-referrerpolicy>referrerpolicy</a></code> content
  attribute, <a id=the-iframe-element:limited-to-only-known-values href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known values</a>.</p>

  <p>The <dfn data-dfn-for=HTMLIFrameElement id=dom-iframe-loading data-dfn-type=attribute><code>loading</code></dfn> IDL attribute must <a id=the-iframe-element:reflect-2 href=common-dom-interfaces.html#reflect>reflect</a> the <code id=the-iframe-element:attr-iframe-loading-3><a href=#attr-iframe-loading>loading</a></code> content attribute, <a id=the-iframe-element:limited-to-only-known-values-2 href=common-dom-interfaces.html#limited-to-only-known-values>limited to only known
  values</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument title="If the iframe and the iframe's parent document are Same Origin, returns a Document (that is, the active document in the inline frame's nested browsing context), else returns null.">HTMLIFrameElement/contentDocument</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLIFrameElement id=dom-iframe-contentdocument data-dfn-type=attribute><code>contentDocument</code></dfn> getter steps are to return
  <a id=the-iframe-element:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-iframe-element:concept-bcc-content-document-2 href=document-sequences.html#concept-bcc-content-document>content document</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow title="The contentWindow property returns the Window object of an HTMLIFrameElement. You can use this Window object to access the iframe's document and its internal DOM. This attribute is read-only, but its properties can be manipulated like the global Window object.">HTMLIFrameElement/contentWindow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>8+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>10.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLIFrameElement id=dom-iframe-contentwindow data-dfn-type=attribute><code>contentWindow</code></dfn> getter steps are to return
  <a id=the-iframe-element:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-iframe-element:content-window href=document-sequences.html#content-window>content window</a>.</p>

  

  <div class=example>

   <p>Here is an example of a page using an <code id=the-iframe-element:the-iframe-element-47><a href=#the-iframe-element>iframe</a></code> to include advertising from an
   advertising broker:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>iframe</c-> <c- e>src</c-><c- o>=</c-><c- s>&quot;https://ads.example.com/?customerid=923513721&amp;amp;format=banner&quot;</c->
        <c- e>width</c-><c- o>=</c-><c- s>&quot;468&quot;</c-> <c- e>height</c-><c- o>=</c-><c- s>&quot;60&quot;</c-><c- p>&gt;&lt;/</c-><c- f>iframe</c-><c- p>&gt;</c-></code></pre>

  </div>




  <h4 id=the-embed-element><span class=secno>4.8.6</span> The <dfn data-dfn-type=element><code>embed</code></dfn> element<a href=#the-embed-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed title="The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.">Element/embed</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>



  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLEmbedElement title="The HTMLEmbedElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating <embed> elements.">HTMLEmbedElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-embed-element:concept-element-categories>Categories</a>:<dd><a id=the-embed-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-embed-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-embed-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a id=the-embed-element:interactive-content-2 href=dom.html#interactive-content-2>Interactive content</a>.<dd><a id=the-embed-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-embed-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-embed-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-embed-element:concept-element-content-model>Content model</a>:<dd><a href=dom.html#concept-content-nothing id=the-embed-element:concept-content-nothing>Nothing</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-embed-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>No <a href=syntax.html#syntax-end-tag id=the-embed-element:syntax-end-tag>end tag</a>.<dt><a href=dom.html#concept-element-attributes id=the-embed-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-embed-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-embed-element:attr-embed-src><a href=#attr-embed-src>src</a></code> —  Address of the resource
     <dd><code id=the-embed-element:attr-embed-type><a href=#attr-embed-type>type</a></code> —  Type of embedded resource
     <dd><code id=the-embed-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-embed-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dd>Any other attribute that has no namespace (see prose).<dt><a href=dom.html#concept-element-accessibility-considerations id=the-embed-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-embed>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-embed>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-embed-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlembedelement' data-dfn-type='interface'><c- g>HTMLEmbedElement</c-></dfn> : <a id='the-embed-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-embed-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-embed-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-embed-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLEmbedElement' id='dom-embed-src' data-dfn-type='attribute'><c- g>src</c-></dfn>;
  [<a id='the-embed-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-embed-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLEmbedElement' id='dom-embed-type' data-dfn-type='attribute'><c- g>type</c-></dfn>;
  [<a id='the-embed-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-embed-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLEmbedElement' id='dom-embed-width' data-dfn-type='attribute'><c- g>width</c-></dfn>;
  [<a id='the-embed-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-embed-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLEmbedElement' id='dom-embed-height' data-dfn-type='attribute'><c- g>height</c-></dfn>;
  <a id='the-embed-element:document' href='dom.html#document'><c- n>Document</c-></a>? <a href='embedded-content-other.html#dom-media-getsvgdocument' id='the-embed-element:dom-media-getsvgdocument'><c- g>getSVGDocument</c-></a>();

  // <a href='obsolete.html#HTMLEmbedElement-partial'>also has obsolete members</a>
};</code></pre>
   </dl>

  <p>The <code id=the-embed-element:the-embed-element><a href=#the-embed-element>embed</a></code> element provides an integration point for an external application or
  interactive content.</p>

  <p>The <dfn data-dfn-for=embed id=attr-embed-src data-dfn-type=element-attr><code>src</code></dfn> attribute
  gives the <a id=the-embed-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the resource being embedded. The attribute, if present, must contain
  a <a id=the-embed-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>If the <code id=the-embed-element:names:-the-itemprop-attribute><a href=microdata.html#names:-the-itemprop-attribute>itemprop</a></code> attribute is specified on an
  <code id=the-embed-element:the-embed-element-2><a href=#the-embed-element>embed</a></code> element, then the <code id=the-embed-element:attr-embed-src-2><a href=#attr-embed-src>src</a></code> attribute must also
  be specified.</p>

  <p>The <dfn data-dfn-for=embed id=attr-embed-type data-dfn-type=element-attr><code>type</code></dfn> attribute,
  if present, gives the <a id=the-embed-element:mime-type href=https://mimesniff.spec.whatwg.org/#mime-type data-x-internal=mime-type>MIME type</a> by which the plugin to instantiate is selected. The
  value must be a <a id=the-embed-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid MIME type string</a>. If both the <code id=the-embed-element:attr-embed-type-2><a href=#attr-embed-type>type</a></code> attribute and the <code id=the-embed-element:attr-embed-src-3><a href=#attr-embed-src>src</a></code>
  attribute are present, then the <code id=the-embed-element:attr-embed-type-3><a href=#attr-embed-type>type</a></code> attribute must specify
  the same type as the <a href=urls-and-fetching.html#content-type id=the-embed-element:content-type>explicit Content-Type metadata</a> of the
  resource given by the <code id=the-embed-element:attr-embed-src-4><a href=#attr-embed-src>src</a></code> attribute.</p>

  

  <p>While any of the following conditions are occurring, any <a id=the-embed-element:plugin href=infrastructure.html#plugin>plugin</a> instantiated for
  the element must be removed, and the <code id=the-embed-element:the-embed-element-3><a href=#the-embed-element>embed</a></code> element <a id=the-embed-element:represents href=dom.html#represents>represents</a>
  nothing:</p>

  <ul><li><p>The element has neither a <code id=the-embed-element:attr-embed-src-5><a href=#attr-embed-src>src</a></code> attribute nor a <code id=the-embed-element:attr-embed-type-4><a href=#attr-embed-type>type</a></code> attribute.<li><p>The element has a <a id=the-embed-element:media-element href=media.html#media-element>media element</a> ancestor.<li><p>The element has an ancestor <code id=the-embed-element:the-object-element><a href=#the-object-element>object</a></code> element that is <em>not</em> showing its
   <a id=the-embed-element:fallback-content href=dom.html#fallback-content>fallback content</a>.</ul>

  <p>An <code id=the-embed-element:the-embed-element-4><a href=#the-embed-element>embed</a></code> element is said to be <dfn id=concept-embed-active>potentially
  active</dfn> when the following conditions are all met simultaneously:</p>

  <ul><li><p>The element is <a id=the-embed-element:in-a-document href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a> or was <a id=the-embed-element:in-a-document-2 href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a> the last time
   the <a id=the-embed-element:event-loop href=webappapis.html#event-loop>event loop</a> reached <a href=webappapis.html#step1>step 1</a>.<li><p>The element's <a id=the-embed-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is <a id=the-embed-element:fully-active href=document-sequences.html#fully-active>fully active</a>.<li><p>The element has either a <code id=the-embed-element:attr-embed-src-6><a href=#attr-embed-src>src</a></code> attribute set or a
   <code id=the-embed-element:attr-embed-type-5><a href=#attr-embed-type>type</a></code> attribute set (or both).<li><p>The element's <code id=the-embed-element:attr-embed-src-7><a href=#attr-embed-src>src</a></code> attribute is either absent or its
   value is not the empty string.<li><p>The element is not a descendant of a <a id=the-embed-element:media-element-2 href=media.html#media-element>media element</a>.<li><p>The element is not a descendant of an <code id=the-embed-element:the-object-element-2><a href=#the-object-element>object</a></code> element that is not showing its
   <a id=the-embed-element:fallback-content-2 href=dom.html#fallback-content>fallback content</a>.<li><p>The element is <a id=the-embed-element:being-rendered href=rendering.html#being-rendered>being rendered</a>, or was <a id=the-embed-element:being-rendered-2 href=rendering.html#being-rendered>being rendered</a> the last
   time the <a id=the-embed-element:event-loop-2 href=webappapis.html#event-loop>event loop</a> reached <a href=webappapis.html#step1>step 1</a>.</ul>

  <p>Whenever an <code id=the-embed-element:the-embed-element-5><a href=#the-embed-element>embed</a></code> element that was not <a href=#concept-embed-active id=the-embed-element:concept-embed-active>potentially active</a> becomes <a href=#concept-embed-active id=the-embed-element:concept-embed-active-2>potentially active</a>, and whenever a <a href=#concept-embed-active id=the-embed-element:concept-embed-active-3>potentially active</a> <code id=the-embed-element:the-embed-element-6><a href=#the-embed-element>embed</a></code> element that is
  remaining <a href=#concept-embed-active id=the-embed-element:concept-embed-active-4>potentially active</a> has its <code id=the-embed-element:attr-embed-type-6><a href=#attr-embed-type>src</a></code> attribute set, changed, or removed or its <code id=the-embed-element:attr-embed-type-7><a href=#attr-embed-type>type</a></code> attribute set, changed, or removed, the user agent must
  <a id=the-embed-element:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <dfn id=embed-task-source>embed task source</dfn> given the element
  to run <a href=#the-embed-element-setup-steps id=the-embed-element:the-embed-element-setup-steps>the <code>embed</code> element setup steps</a> for that element.</p>

  <p><dfn id=the-embed-element-setup-steps>The <code>embed</code> element setup steps</dfn> for a given <code id=the-embed-element:the-embed-element-7><a href=#the-embed-element>embed</a></code> element
  <var>element</var> are as follows:</p>

  <ol><li><p>If another <a href=webappapis.html#concept-task id=the-embed-element:concept-task>task</a> has since been queued to run <a href=#the-embed-element-setup-steps id=the-embed-element:the-embed-element-setup-steps-2>the
   <code>embed</code> element setup steps</a> for <var>element</var>, then return.<li>
    <p>If <var>element</var> has a <code id=the-embed-element:attr-embed-src-8><a href=#attr-embed-src>src</a></code> attribute set, then:</p>

    <ol><li><p>Let <var>url</var> be the result of <a id=the-embed-element:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given
     <var>element</var>'s <code id=the-embed-element:attr-embed-src-9><a href=#attr-embed-src>src</a></code> attribute's value, relative to
     <var>element</var>'s <a id=the-embed-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.<li><p>If <var>url</var> is failure, then return.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=the-embed-element:concept-request data-x-internal=concept-request>request</a> whose
     <a href=https://fetch.spec.whatwg.org/#concept-request-url id=the-embed-element:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=the-embed-element:concept-request-client data-x-internal=concept-request-client>client</a> is <var>element</var>'s <a id=the-embed-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a>'s <a id=the-embed-element:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=the-embed-element:concept-request-destination data-x-internal=concept-request-destination>destination</a> is "<code>embed</code>",
     <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-embed-element:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>include</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=the-embed-element:concept-request-mode data-x-internal=concept-request-mode>mode</a> is "<code>navigate</code>", <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=the-embed-element:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
     type</a> is "<code>embed</code>", and whose <a id=the-embed-element:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials flag</a>
     is set.<li>
      <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-embed-element:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>, with <i id=the-embed-element:processresponse><a data-x-internal=processresponse href=https://fetch.spec.whatwg.org/#process-response>processResponse</a></i> set to the following steps given <a href=https://fetch.spec.whatwg.org/#concept-response id=the-embed-element:concept-response data-x-internal=concept-response>response</a> <var>response</var>:</p>

      <ol><li><p>If another <a href=webappapis.html#concept-task id=the-embed-element:concept-task-2>task</a> has since been queued to run
       <a href=#the-embed-element-setup-steps id=the-embed-element:the-embed-element-setup-steps-3>the <code>embed</code> element setup steps</a> for <var>element</var>, then
       return.<li><p>If <var>response</var> is a <a id=the-embed-element:network-error href=https://fetch.spec.whatwg.org/#concept-network-error data-x-internal=network-error>network error</a>, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-embed-element:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-embed-element:event-load><a href=indices.html#event-load>load</a></code> at <var>element</var>, and return.<li><p>Let <var>type</var> be the result of determining the <a href=#concept-embed-type id=the-embed-element:concept-embed-type>type of content</a> given <var>element</var> and
       <var>response</var>.<li>
        <p>Switch on <var>type</var>:</p>

        <dl class=switch><dt>null<dd>
          <ol><li><p><a href=#display-no-plugin id=the-embed-element:display-no-plugin>Display no plugin</a> for <var>element</var>.</ol>
         <dt>Otherwise<dd>
          <ol><li><p>If <var>element</var>'s <a id=the-embed-element:content-navigable href=document-sequences.html#content-navigable>content navigable</a> is null, then
           <a id=the-embed-element:create-a-new-child-navigable href=document-sequences.html#create-a-new-child-navigable>create a new child navigable</a> for <var>element</var>.<li>
            <p><a id=the-embed-element:navigate href=browsing-the-web.html#navigate>Navigate</a> <var>element</var>'s <a id=the-embed-element:content-navigable-2 href=document-sequences.html#content-navigable>content
            navigable</a> to <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=the-embed-element:concept-response-url data-x-internal=concept-response-url>URL</a> using <var>element</var>'s <a id=the-embed-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
            document</a>, with <i id=the-embed-element:navigation-response><a href=browsing-the-web.html#navigation-response>response</a></i> set to
            <var>response</var>, and <i id=the-embed-element:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></i> set to "<code id=the-embed-element:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".</p>

            <p class=note><var>element</var>'s <code id=the-embed-element:attr-embed-src-10><a href=#attr-embed-src>src</a></code> attribute
            does not get updated if the <a id=the-embed-element:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> gets further navigated to
            other locations.</p>
           <li><p><var>element</var> now <a id=the-embed-element:represents-2 href=dom.html#represents>represents</a> its <a id=the-embed-element:content-navigable-4 href=document-sequences.html#content-navigable>content
           navigable</a>.</ol>
         </dl>
       </ol>

      <p>Fetching the resource must <a id=the-embed-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load event</a> of <var>element</var>'s
      <a id=the-embed-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>.</p>
     </ol>
   <li><p>Otherwise, <a href=#display-no-plugin id=the-embed-element:display-no-plugin-2>display no plugin</a> for <var>element</var>.</ol>

  <p>To determine the <dfn id=concept-embed-type>type of the content</dfn> given an
  <code id=the-embed-element:the-embed-element-8><a href=#the-embed-element>embed</a></code> element <var>element</var> and a <a href=https://fetch.spec.whatwg.org/#concept-response id=the-embed-element:concept-response-2 data-x-internal=concept-response>response</a> <var>response</var>, run the following steps:</p>

  <ol><li><p>If <var>element</var> has a <code id=the-embed-element:attr-embed-type-8><a href=#attr-embed-type>type</a></code> attribute, and that
   attribute's value is a type that a <a id=the-embed-element:plugin-2 href=infrastructure.html#plugin>plugin</a> supports, then return the value of the
   <code id=the-embed-element:attr-embed-type-9><a href=#attr-embed-type>type</a></code> attribute.<li>
    <p>If the <a href=https://url.spec.whatwg.org/#concept-url-path id=the-embed-element:concept-url-path data-x-internal=concept-url-path>path</a> component of <var>response</var>'s
    <a href=https://fetch.spec.whatwg.org/#concept-response-url id=the-embed-element:concept-response-url-2 data-x-internal=concept-response-url>url</a> matches a pattern that a <a id=the-embed-element:plugin-3 href=infrastructure.html#plugin>plugin</a>
    supports, then return the type that that plugin can handle.</p>

    <p class=example>For example, a plugin might say that it can handle URLs with <a href=https://url.spec.whatwg.org/#concept-url-path id=the-embed-element:concept-url-path-2 data-x-internal=concept-url-path>path</a> components that end with the four character string
    "<code>.swf</code>".</p>

    
    
   <li><p>If <var>response</var> has <a href=urls-and-fetching.html#content-type id=the-embed-element:content-type-2>explicit Content-Type
   metadata</a>, and that value is a type that a <a id=the-embed-element:plugin-4 href=infrastructure.html#plugin>plugin</a> supports, then return that
   value.<li><p>Return null.</ol>
  

  <p class=note>It is intentional that the above algorithm allows <var>response</var> to have a
  non-<a id=the-embed-element:ok-status href=https://fetch.spec.whatwg.org/#ok-status data-x-internal=ok-status>ok status</a>. This allows servers to return data for plugins even with error
  responses (e.g., HTTP 500 Internal Server Error codes can still contain plugin data).</p>

  <p>To <dfn id=display-no-plugin>display no plugin</dfn> for an <code id=the-embed-element:the-embed-element-9><a href=#the-embed-element>embed</a></code> element <var>element</var>:</p>

  <ol><li><p><a id=the-embed-element:destroy-a-child-navigable href=document-sequences.html#destroy-a-child-navigable>Destroy a child navigable</a> given <var>element</var>.<li><p>Display an indication that no <a id=the-embed-element:plugin-5 href=infrastructure.html#plugin>plugin</a> could be found for <var>element</var>,
   as the contents of <var>element</var>.<li><p><var>element</var> now <a id=the-embed-element:represents-3 href=dom.html#represents>represents</a> nothing.</ol>

  <p class=note>The <code id=the-embed-element:the-embed-element-10><a href=#the-embed-element>embed</a></code> element has no <a id=the-embed-element:fallback-content-3 href=dom.html#fallback-content>fallback content</a>; its
  descendants are ignored.</p>

  <p>Whenever an <code id=the-embed-element:the-embed-element-11><a href=#the-embed-element>embed</a></code> element that was <a href=#concept-embed-active id=the-embed-element:concept-embed-active-5>potentially
  active</a> stops being <a href=#concept-embed-active id=the-embed-element:concept-embed-active-6>potentially active</a>, any
  <a id=the-embed-element:plugin-6 href=infrastructure.html#plugin>plugin</a> that had been instantiated for that element must be unloaded.</p>

  <p>The <code id=the-embed-element:the-embed-element-12><a href=#the-embed-element>embed</a></code> element <a href=#potentially-delays-the-load-event id=the-embed-element:potentially-delays-the-load-event>potentially delays the load event</a>.</p>

  

  <p>The <code id=the-embed-element:the-embed-element-13><a href=#the-embed-element>embed</a></code> element supports <a id=the-embed-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>




  <h4 id=the-object-element><span class=secno>4.8.7</span> The <dfn data-dfn-type=element><code>object</code></dfn> element<a href=#the-object-element class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object title="The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.">Element/object</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>Yes</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement title="The HTMLObjectElement interface provides special properties and methods (beyond those on the HTMLElement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources.">HTMLObjectElement</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/data title="The data property of the HTMLObjectElement interface returns a string that reflects the data HTML attribute, specifying the address of a resource's data.">HTMLObjectElement/data</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/type title="The type property of the HTMLObjectElement interface returns a string that reflects the type HTML attribute, specifying the MIME type of the resource.">HTMLObjectElement/type</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/name title="The name property of the HTMLObjectElement interface returns a string that reflects the name HTML attribute, specifying the name of the browsing context.">HTMLObjectElement/name</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>5.5+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><dl class=element><dt><a href=dom.html#concept-element-categories id=the-object-element:concept-element-categories>Categories</a>:<dd><a id=the-object-element:flow-content-2 href=dom.html#flow-content-2>Flow content</a>.<dd><a id=the-object-element:phrasing-content-2 href=dom.html#phrasing-content-2>Phrasing content</a>.<dd><a id=the-object-element:embedded-content-category href=dom.html#embedded-content-category>Embedded content</a>.<dd><a href=forms.html#category-listed id=the-object-element:category-listed>Listed</a> <a id=the-object-element:form-associated-element href=forms.html#form-associated-element>form-associated element</a>.<dd><a id=the-object-element:palpable-content-2 href=dom.html#palpable-content-2>Palpable content</a>.<dt><a href=dom.html#concept-element-contexts id=the-object-element:concept-element-contexts>Contexts in which this element can be used</a>:<dd>Where <a id=the-object-element:embedded-content-category-2 href=dom.html#embedded-content-category>embedded content</a> is expected.<dt><a href=dom.html#concept-element-content-model id=the-object-element:concept-element-content-model>Content model</a>:<dd><a id=the-object-element:transparent href=dom.html#transparent>Transparent</a>.<dt><a href=dom.html#concept-element-tag-omission id=the-object-element:concept-element-tag-omission>Tag omission in text/html</a>:<dd>Neither tag is omissible.<dt><a href=dom.html#concept-element-attributes id=the-object-element:concept-element-attributes>Content attributes</a>:<dd><a id=the-object-element:global-attributes href=dom.html#global-attributes>Global attributes</a><dd><code id=the-object-element:attr-object-data><a href=#attr-object-data>data</a></code> —  Address of the resource
     <dd><code id=the-object-element:attr-object-type><a href=#attr-object-type>type</a></code> —  Type of embedded resource
     <dd><code id=the-object-element:attr-object-name><a href=#attr-object-name>name</a></code> —  Name of <a id=the-object-element:content-navigable href=document-sequences.html#content-navigable>content navigable</a>
     <dd><code id=the-object-element:attr-fae-form><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> —  Associates the element with a <code id=the-object-element:the-form-element><a href=forms.html#the-form-element>form</a></code> element
     <dd><code id=the-object-element:attr-dim-width><a href=embedded-content-other.html#attr-dim-width>width</a></code> —  Horizontal dimension
     <dd><code id=the-object-element:attr-dim-height><a href=embedded-content-other.html#attr-dim-height>height</a></code> —  Vertical dimension
     <dt><a href=dom.html#concept-element-accessibility-considerations id=the-object-element:concept-element-accessibility-considerations>Accessibility considerations</a>:<dd><a href=https://w3c.github.io/html-aria/#el-object>For authors</a>.<dd><a href=https://w3c.github.io/html-aam/#el-object>For implementers</a>.<dt><a href=dom.html#concept-element-dom id=the-object-element:concept-element-dom>DOM interface</a>:<dd>
    <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlobjectelement' data-dfn-type='interface'><c- g>HTMLObjectElement</c-></dfn> : <a id='the-object-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
  [<a id='the-object-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();

  [<a id='the-object-element:cereactions' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflecturl' id='the-object-element:xattr-reflecturl'><c- g>ReflectURL</c-></a>] <c- b>attribute</c-> <c- b>USVString</c-> <dfn data-dfn-for='HTMLObjectElement' id='dom-object-data' data-dfn-type='attribute'><c- g>data</c-></dfn>;
  [<a id='the-object-element:cereactions-2' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-object-element:xattr-reflect'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLObjectElement' id='dom-object-type' data-dfn-type='attribute'><c- g>type</c-></dfn>;
  [<a id='the-object-element:cereactions-3' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-object-element:xattr-reflect-2'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLObjectElement' id='dom-object-name' data-dfn-type='attribute'><c- g>name</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-object-element:htmlformelement' href='forms.html#htmlformelement'><c- n>HTMLFormElement</c-></a>? <a href='form-control-infrastructure.html#dom-fae-form' id='the-object-element:dom-fae-form'><c- g>form</c-></a>;
  [<a id='the-object-element:cereactions-4' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-object-element:xattr-reflect-3'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLObjectElement' id='dom-object-width' data-dfn-type='attribute'><c- g>width</c-></dfn>;
  [<a id='the-object-element:cereactions-5' href='custom-elements.html#cereactions'><c- g>CEReactions</c-></a>, <a href='common-dom-interfaces.html#xattr-reflect' id='the-object-element:xattr-reflect-4'><c- g>Reflect</c-></a>] <c- b>attribute</c-> <c- b>DOMString</c-> <dfn data-dfn-for='HTMLObjectElement' id='dom-object-height' data-dfn-type='attribute'><c- g>height</c-></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-object-element:document' href='dom.html#document'><c- n>Document</c-></a>? <a href='#dom-object-contentdocument' id='the-object-element:dom-object-contentdocument'><c- g>contentDocument</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-object-element:windowproxy' href='nav-history-apis.html#windowproxy'><c- n>WindowProxy</c-></a>? <a href='#dom-object-contentwindow' id='the-object-element:dom-object-contentwindow'><c- g>contentWindow</c-></a>;
  <a id='the-object-element:document-2' href='dom.html#document'><c- n>Document</c-></a>? <a href='embedded-content-other.html#dom-media-getsvgdocument' id='the-object-element:dom-media-getsvgdocument'><c- g>getSVGDocument</c-></a>();

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-willvalidate' id='the-object-element:dom-cva-willvalidate'><c- g>willValidate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a id='the-object-element:validitystate' href='form-control-infrastructure.html#validitystate'><c- n>ValidityState</c-></a> <a href='form-control-infrastructure.html#dom-cva-validity' id='the-object-element:dom-cva-validity'><c- g>validity</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c-> <a href='form-control-infrastructure.html#dom-cva-validationmessage' id='the-object-element:dom-cva-validationmessage'><c- g>validationMessage</c-></a>;
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-checkvalidity' id='the-object-element:dom-cva-checkvalidity'><c- g>checkValidity</c-></a>();
  <c- b>boolean</c-> <a href='form-control-infrastructure.html#dom-cva-reportvalidity' id='the-object-element:dom-cva-reportvalidity'><c- g>reportValidity</c-></a>();
  <c- b>undefined</c-> <a href='form-control-infrastructure.html#dom-cva-setcustomvalidity' id='the-object-element:dom-cva-setcustomvalidity'><c- g>setCustomValidity</c-></a>(<c- b>DOMString</c-> <c- g>error</c->);

  // <a href='obsolete.html#HTMLObjectElement-partial'>also has obsolete members</a>
};</code></pre>
    <p>Depending on the type of content instantiated by the
    <code id=the-object-element:the-object-element><a href=#the-object-element>object</a></code> element, the node also supports other
    interfaces.</p>
   </dl>

  <p>The <code id=the-object-element:the-object-element-2><a href=#the-object-element>object</a></code> element can represent an external resource, which, depending on the
  type of the resource, will either be treated as an image or as a <a id=the-object-element:child-navigable href=document-sequences.html#child-navigable>child
  navigable</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-data data-dfn-type=element-attr><code>data</code></dfn> attribute
  specifies the <a id=the-object-element:url href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the resource. It must be present, and must contain a
  <a id=the-object-element:valid-non-empty-url-potentially-surrounded-by-spaces href=urls-and-fetching.html#valid-non-empty-url-potentially-surrounded-by-spaces>valid non-empty URL potentially surrounded by spaces</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-type data-dfn-type=element-attr><code>type</code></dfn> attribute,
  if present, specifies the type of the resource. If present, the attribute must be a <a id=the-object-element:valid-mime-type-string href=https://mimesniff.spec.whatwg.org/#valid-mime-type data-x-internal=valid-mime-type-string>valid
  MIME type string</a>.</p>

  <p>The <dfn data-dfn-for=object id=attr-object-name data-dfn-type=element-attr><code>name</code></dfn>
  attribute, if present, must be a <a id=the-object-element:valid-navigable-target-name href=document-sequences.html#valid-navigable-target-name>valid navigable target name</a>. The given value is
  used to name the element's <a id=the-object-element:content-navigable-2 href=document-sequences.html#content-navigable>content navigable</a>, if applicable, and if present when the
  element's <a id=the-object-element:content-navigable-3 href=document-sequences.html#content-navigable>content navigable</a> is <a href=document-sequences.html#create-a-new-child-navigable id=the-object-element:create-a-new-child-navigable>created</a>.</p>

  

  <p>Whenever one of the following conditions occur:</p>

  <ul><li>the element is created,

   <li>the element is popped off the <a id=the-object-element:stack-of-open-elements href=parsing.html#stack-of-open-elements>stack of open elements</a> of an <a id=the-object-element:html-parser href=parsing.html#html-parser>HTML
   parser</a> or <a id=the-object-element:xml-parser href=xhtml.html#xml-parser>XML parser</a>,

   <li>the element is not on the <a id=the-object-element:stack-of-open-elements-2 href=parsing.html#stack-of-open-elements>stack of open elements</a> of an <a id=the-object-element:html-parser-2 href=parsing.html#html-parser>HTML parser</a>
   or <a id=the-object-element:xml-parser-2 href=xhtml.html#xml-parser>XML parser</a>, and it is either <a href=infrastructure.html#insert-an-element-into-a-document id=the-object-element:insert-an-element-into-a-document>inserted into a document</a> or <a href=infrastructure.html#remove-an-element-from-a-document id=the-object-element:remove-an-element-from-a-document>removed from a document</a>,

   <li>the element's <a id=the-object-element:node-document href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> changes whether it is <a id=the-object-element:fully-active href=document-sequences.html#fully-active>fully active</a>,

   <li>one of the element's ancestor <code id=the-object-element:the-object-element-3><a href=#the-object-element>object</a></code> elements changes to or from showing its
   <a id=the-object-element:fallback-content href=dom.html#fallback-content>fallback content</a>,

   <li>the element's <code id=the-object-element:attr-object-classid><a href=obsolete.html#attr-object-classid>classid</a></code> attribute is set, changed, or
   removed,

   <li>the element's <code id=the-object-element:attr-object-classid-2><a href=obsolete.html#attr-object-classid>classid</a></code> attribute is not present, and
   its <code id=the-object-element:attr-object-data-2><a href=#attr-object-data>data</a></code> attribute is set, changed, or removed,

   <li>neither the element's <code id=the-object-element:attr-object-classid-3><a href=obsolete.html#attr-object-classid>classid</a></code> attribute nor its
   <code id=the-object-element:attr-object-data-3><a href=#attr-object-data>data</a></code> attribute are present, and its <code id=the-object-element:attr-object-type-2><a href=#attr-object-type>type</a></code> attribute is set, changed, or removed,

   <li>the element changes from <a id=the-object-element:being-rendered href=rendering.html#being-rendered>being rendered</a> to not being rendered, or vice versa,
  </ul> 

  <p>...the user agent must <a id=the-object-element:queue-an-element-task href=webappapis.html#queue-an-element-task>queue an element task</a> on the <a id=the-object-element:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task
  source</a> given the <code id=the-object-element:the-object-element-4><a href=#the-object-element>object</a></code> element to run the following steps to (re)determine
  what the <code id=the-object-element:the-object-element-5><a href=#the-object-element>object</a></code> element represents. This <a href=webappapis.html#concept-task id=the-object-element:concept-task>task</a>
  being <a href=webappapis.html#queue-a-task id=the-object-element:queue-a-task>queued</a> or actively running must <a id=the-object-element:delay-the-load-event href=parsing.html#delay-the-load-event>delay the load
  event</a> of the element's <a id=the-object-element:node-document-2 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>. </p>

  <ol><li>
    <p>If the user has indicated a preference that this <code id=the-object-element:the-object-element-6><a href=#the-object-element>object</a></code> element's <a id=the-object-element:fallback-content-2 href=dom.html#fallback-content>fallback
    content</a> be shown instead of the element's usual behavior, then jump to the step below
    labeled <i>fallback</i>.</p>

    <p class=note>For example, a user could ask for the element's <a id=the-object-element:fallback-content-3 href=dom.html#fallback-content>fallback content</a> to
    be shown because that content uses a format that the user finds more accessible.</p>
   <li><p>If the element has an ancestor <a id=the-object-element:media-element href=media.html#media-element>media element</a>, or has an ancestor
   <code id=the-object-element:the-object-element-7><a href=#the-object-element>object</a></code> element that is <em>not</em> showing its <a id=the-object-element:fallback-content-4 href=dom.html#fallback-content>fallback content</a>, or if
   the element is not <a id=the-object-element:in-a-document href=https://dom.spec.whatwg.org/#in-a-document data-x-internal=in-a-document>in a document</a> whose <a href=document-sequences.html#concept-document-bc id=the-object-element:concept-document-bc>browsing
   context</a> is non-null, or if the element's <a id=the-object-element:node-document-3 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a> is not <a id=the-object-element:fully-active-2 href=document-sequences.html#fully-active>fully
   active</a>, or if the element is still in the <a id=the-object-element:stack-of-open-elements-3 href=parsing.html#stack-of-open-elements>stack of open elements</a> of an
   <a id=the-object-element:html-parser-3 href=parsing.html#html-parser>HTML parser</a> or <a id=the-object-element:xml-parser-3 href=xhtml.html#xml-parser>XML parser</a>, or if the element is not <a id=the-object-element:being-rendered-2 href=rendering.html#being-rendered>being
   rendered</a>, then jump to the step below labeled <i>fallback</i>.<li><p>If the <code id=the-object-element:attr-object-data-4><a href=#attr-object-data>data</a></code> attribute is present and its value is
   not the empty string, then:</p>

    <ol><li><p>If the <code id=the-object-element:attr-object-type-3><a href=#attr-object-type>type</a></code> attribute is present and its value is
     not a type that the user agent supports, then the user agent may jump to the step below labeled
     <i>fallback</i> without fetching the content to examine its real type.<li><p>Let <var>url</var> be the result of <a id=the-object-element:encoding-parsing-a-url href=urls-and-fetching.html#encoding-parsing-a-url>encoding-parsing a URL</a> given the <code id=the-object-element:attr-object-data-5><a href=#attr-object-data>data</a></code> attribute's value, relative to the element's <a id=the-object-element:node-document-4 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
     document</a>.<li><p>If <var>url</var> is failure, then <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-object-element:concept-event-fire data-x-internal=concept-event-fire>fire an
     event</a> named <code id=the-object-element:event-error><a href=indices.html#event-error>error</a></code> at the element and jump to the step
     below labeled <i>fallback</i>.<li><p>Let <var>request</var> be a new <a href=https://fetch.spec.whatwg.org/#concept-request id=the-object-element:concept-request data-x-internal=concept-request>request</a> whose
     <a href=https://fetch.spec.whatwg.org/#concept-request-url id=the-object-element:concept-request-url data-x-internal=concept-request-url>URL</a> is <var>url</var>, <a href=https://fetch.spec.whatwg.org/#concept-request-client id=the-object-element:concept-request-client data-x-internal=concept-request-client>client</a> is the element's <a id=the-object-element:node-document-5 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>'s
     <a id=the-object-element:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>, <a href=https://fetch.spec.whatwg.org/#concept-request-destination id=the-object-element:concept-request-destination data-x-internal=concept-request-destination>destination</a> is "<code>object</code>",
     <a href=https://fetch.spec.whatwg.org/#concept-request-credentials-mode id=the-object-element:concept-request-credentials-mode data-x-internal=concept-request-credentials-mode>credentials mode</a> is "<code>include</code>", <a href=https://fetch.spec.whatwg.org/#concept-request-mode id=the-object-element:concept-request-mode data-x-internal=concept-request-mode>mode</a> is "<code>navigate</code>", <a href=https://fetch.spec.whatwg.org/#request-initiator-type id=the-object-element:concept-request-initiator-type data-x-internal=concept-request-initiator-type>initiator
     type</a> is "<code>object</code>", and whose <a id=the-object-element:use-url-credentials-flag href=https://fetch.spec.whatwg.org/#concept-request-use-url-credentials-flag data-x-internal=use-url-credentials-flag>use-URL-credentials
     flag</a> is set.<li>
      <p><a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-object-element:concept-fetch data-x-internal=concept-fetch>Fetch</a> <var>request</var>.</p>

      
      <p>Fetching the resource must <a id=the-object-element:delay-the-load-event-2 href=parsing.html#delay-the-load-event>delay the load event</a> of the element's <a id=the-object-element:node-document-6 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node
      document</a> until the <a href=webappapis.html#concept-task id=the-object-element:concept-task-2>task</a> that is <a href=webappapis.html#queue-a-task id=the-object-element:queue-a-task-2>queued</a> by the <a id=the-object-element:networking-task-source href=webappapis.html#networking-task-source>networking task source</a> once the resource has been
      fetched (defined next) has been run.</p>
     <li><p>If the resource is not yet available (e.g. because the resource was not available in the
     cache, so that loading the resource required making a request over the network), then jump to
     the step below labeled <i>fallback</i>. The <a href=webappapis.html#concept-task id=the-object-element:concept-task-3>task</a> that is
     <a href=webappapis.html#queue-a-task id=the-object-element:queue-a-task-3>queued</a> by the <a id=the-object-element:networking-task-source-2 href=webappapis.html#networking-task-source>networking task source</a> once the
     resource is available must restart this algorithm from this step. Resources can load
     incrementally; user agents may opt to consider a resource "available" whenever enough data has
     been obtained to begin processing the resource.<li><p>If the load failed (e.g. there was an HTTP 404 error, there was a DNS error), <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-object-element:concept-event-fire-2 data-x-internal=concept-event-fire>fire an event</a> named <code id=the-object-element:event-error-2><a href=indices.html#event-error>error</a></code>
     at the element, then jump to the step below labeled <i>fallback</i>.<li id=object-type-detection>

      <p>Determine the <var>resource type</var>, as follows:</p>



      <ol><li>
        <p>Let the <var>resource type</var> be unknown.</p>
       <li>
        

        <p>If the user agent is configured to strictly obey Content-Type headers for this resource,
        and the resource has <a href=urls-and-fetching.html#content-type id=the-object-element:content-type>associated Content-Type metadata</a>,
        then let the <var>resource type</var> be the type specified in <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-2>the resource's Content-Type metadata</a>, and jump to the step below
        labeled <i>handler</i>.</p>

        <p class=warning>This can introduce a vulnerability, wherein a site is trying to embed a
        resource that uses a particular type, but the remote site overrides that and instead
        furnishes the user agent with a resource that triggers a different type of content with different
        security characteristics. </p>
       <li>
        <p>Run the appropriate set of steps from the following
        list:</p>

        <dl class=switch><dt>If the resource has <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-3>associated Content-Type
         metadata</a><dd>
          <ol><li>
            <p>Let <var>binary</var> be false.</p>
           <li>
            <p>If the type specified in <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-4>the resource's Content-Type
            metadata</a> is "<code id=the-object-element:text/plain><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code>", and the result of applying the <a href=https://mimesniff.spec.whatwg.org/#rules-for-text-or-binary id=the-object-element:content-type-sniffing:-text-or-binary data-x-internal=content-type-sniffing:-text-or-binary>rules for distinguishing if a resource is
            text or binary</a> to the resource is that the resource is not
            <code id=the-object-element:text/plain-2><a data-x-internal=text/plain href=https://www.rfc-editor.org/rfc/rfc2046#section-4.1.3>text/plain</a></code>, then set <var>binary</var> to true.</p>
           <li>
            <p>If the type specified in <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-5>the resource's Content-Type
            metadata</a> is "<code id=the-object-element:application/octet-stream><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>", then set <var>binary</var> to true.</p>
           <li>
            <p>If <var>binary</var> is false, then let the <var>resource
            type</var> be the type specified in <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-6>the resource's
            Content-Type metadata</a>, and jump to the step below labeled <i>handler</i>.</p>
           <li>
            <p>If there is a <code id=the-object-element:attr-object-type-4><a href=#attr-object-type>type</a></code> attribute present on the
            <code id=the-object-element:the-object-element-8><a href=#the-object-element>object</a></code> element, and its value is not <code id=the-object-element:application/octet-stream-2><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>,
            then run the following steps:</p>

            <ol><li>
              <p>If the attribute's value is a type that starts with "<code>image/</code>" that is
              not also an <a id=the-object-element:xml-mime-type href=https://mimesniff.spec.whatwg.org/#xml-mime-type data-x-internal=xml-mime-type>XML MIME type</a>, then let the <var>resource type</var> be the
              type specified in that <code id=the-object-element:attr-object-type-5><a href=#attr-object-type>type</a></code> attribute.</p>
             <li>
              <p>Jump to the step below labeled <i>handler</i>.</p>
             </ol>
           </ol>
         <dt>Otherwise, if the resource does not have <a href=urls-and-fetching.html#content-type id=the-object-element:content-type-7>associated
         Content-Type metadata</a><dd>
          <ol><li>
            <p>If there is a <code id=the-object-element:attr-object-type-6><a href=#attr-object-type>type</a></code> attribute present on the
            <code id=the-object-element:the-object-element-9><a href=#the-object-element>object</a></code> element, then let the <var>tentative type</var> be the type
            specified in that <code id=the-object-element:attr-object-type-7><a href=#attr-object-type>type</a></code> attribute.</p>

            <p>Otherwise, let <var>tentative type</var> be the <a href=https://mimesniff.spec.whatwg.org/#computed-mime-type id=the-object-element:content-type-sniffing-2 data-x-internal=content-type-sniffing-2>computed type of the resource</a>.</p>
           <li>
            <p>If <var>tentative type</var> is <em>not</em>
            <code id=the-object-element:application/octet-stream-3><a data-x-internal=application/octet-stream href=https://www.rfc-editor.org/rfc/rfc2046#section-4.5.1>application/octet-stream</a></code>, then let <var>resource type</var> be
            <var>tentative type</var> and jump to the step below labeled
            <i>handler</i>.</p>
           </ol>
         </dl>
       <li>
        

        <p>If applying the <a id=the-object-element:url-parser href=https://url.spec.whatwg.org/#concept-url-parser data-x-internal=url-parser>URL parser</a> algorithm to the <a id=the-object-element:url-2 href=https://url.spec.whatwg.org/#concept-url data-x-internal=url>URL</a> of the
        specified resource (after any redirects) results in a <a id=the-object-element:url-record href=https://url.spec.whatwg.org/#concept-url data-x-internal=url-record>URL record</a> whose <a href=https://url.spec.whatwg.org/#concept-url-path id=the-object-element:concept-url-path data-x-internal=concept-url-path>path</a> component matches a pattern that a <a id=the-object-element:plugin href=infrastructure.html#plugin>plugin</a>
        supports, then let <var>resource type</var> be the type that that plugin can
        handle.</p>

        <p class=example>For example, a plugin might say that it can handle resources with <a href=https://url.spec.whatwg.org/#concept-url-path id=the-object-element:concept-url-path-2 data-x-internal=concept-url-path>path</a> components that end with the four character string
        "<code>.swf</code>".</p>

        
        
       </ol>

      <p class=note>It is possible for this step to finish, or for one of the substeps above to
      jump straight to the next step, with <var>resource type</var> still being unknown. In
      both cases, the next step will trigger fallback.</p>
     <li><p><i>Handler</i>: Handle the content as given by the first of the following cases that
     matches:</p>

      <dl class=switch><dt>If the <var>resource type</var> is an <a id=the-object-element:xml-mime-type-2 href=https://mimesniff.spec.whatwg.org/#xml-mime-type data-x-internal=xml-mime-type>XML MIME type</a>, or  if the <var>resource type</var>
       does not start with "<code>image/</code>"<dd>
        <p>If the <code id=the-object-element:the-object-element-10><a href=#the-object-element>object</a></code> element's <a id=the-object-element:content-navigable-4 href=document-sequences.html#content-navigable>content navigable</a> is null, then
        <a id=the-object-element:create-a-new-child-navigable-2 href=document-sequences.html#create-a-new-child-navigable>create a new child navigable</a> for the element.</p>

        <p>Let <var>response</var> be the <a href=https://fetch.spec.whatwg.org/#concept-response id=the-object-element:concept-response data-x-internal=concept-response>response</a> from
        <a href=https://fetch.spec.whatwg.org/#concept-fetch id=the-object-element:concept-fetch-2 data-x-internal=concept-fetch>fetch</a>.</p>

        <p>If <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=the-object-element:concept-response-url data-x-internal=concept-response-url>URL</a> does not <a href=urls-and-fetching.html#matches-about:blank id=the-object-element:matches-about:blank>match <code>about:blank</code></a>, then
        <a id=the-object-element:navigate href=browsing-the-web.html#navigate>navigate</a> the element's <a id=the-object-element:content-navigable-5 href=document-sequences.html#content-navigable>content navigable</a> to
        <var>response</var>'s <a href=https://fetch.spec.whatwg.org/#concept-response-url id=the-object-element:concept-response-url-2 data-x-internal=concept-response-url>URL</a> using the element's
        <a id=the-object-element:node-document-7 href=https://dom.spec.whatwg.org/#concept-node-document data-x-internal=node-document>node document</a>, with <i id=the-object-element:navigation-hh><a href=browsing-the-web.html#navigation-hh>historyHandling</a></i> set to
        "<code id=the-object-element:navigationhistorybehavior-replace><a href=browsing-the-web.html#navigationhistorybehavior-replace>replace</a></code>".</p>

        <p class=note>The <code id=the-object-element:attr-object-data-6><a href=#attr-object-data>data</a></code> attribute of the
        <code id=the-object-element:the-object-element-11><a href=#the-object-element>object</a></code> element doesn't get updated if the <a id=the-object-element:content-navigable-6 href=document-sequences.html#content-navigable>content navigable</a> gets
        further <a href=browsing-the-web.html#navigate id=the-object-element:navigate-2>navigated</a> to other locations.</p>

        <p>The <code id=the-object-element:the-object-element-12><a href=#the-object-element>object</a></code> element <a id=the-object-element:represents href=dom.html#represents>represents</a> its <a id=the-object-element:content-navigable-7 href=document-sequences.html#content-navigable>content
        navigable</a>.</p>

        
       <dt>If the <var>resource type</var> starts with "<code>image/</code>", and support
       for images has not been disabled<dd>
        <p><a id=the-object-element:destroy-a-child-navigable href=document-sequences.html#destroy-a-child-navigable>Destroy a child navigable</a> given the <code id=the-object-element:the-object-element-13><a href=#the-object-element>object</a></code> element.</p>

        <p>Apply the <a href=https://mimesniff.spec.whatwg.org/#rules-for-sniffing-images-specifically id=the-object-element:content-type-sniffing:-image data-x-internal=content-type-sniffing:-image>image sniffing</a> rules to
        determine the type of the image.</p>

        <p>The <code id=the-object-element:the-object-element-14><a href=#the-object-element>object</a></code> element <a id=the-object-element:represents-2 href=dom.html#represents>represents</a> the specified image.</p>

        <p>If the image cannot be rendered, e.g. because it is malformed or in an unsupported
        format, jump to the step below labeled <i>fallback</i>.</p>
       <dt>Otherwise<dd>
        <p>The given <var>resource type</var> is not supported. Jump to the step below
        labeled <i>fallback</i>.</p>

        <p class=note>If the previous step ended with the <var>resource type</var> being
        unknown, this is the case that is triggered.</p>
       </dl>
     <li><p>The element's contents are not part of what the <code id=the-object-element:the-object-element-15><a href=#the-object-element>object</a></code> element
     represents.</p>

     <li>
      <p>If the <code id=the-object-element:the-object-element-16><a href=#the-object-element>object</a></code> element does not represent its <a id=the-object-element:content-navigable-8 href=document-sequences.html#content-navigable>content navigable</a>,
      then once the resource is completely loaded, <a id=the-object-element:queue-an-element-task-2 href=webappapis.html#queue-an-element-task>queue an element task</a> on the
      <a id=the-object-element:dom-manipulation-task-source-2 href=webappapis.html#dom-manipulation-task-source>DOM manipulation task source</a> given the <code id=the-object-element:the-object-element-17><a href=#the-object-element>object</a></code> element to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-object-element:concept-event-fire-3 data-x-internal=concept-event-fire>fire an event</a> named <code id=the-object-element:event-load><a href=indices.html#event-load>load</a></code>
      at the element.</p>

      <p class=note>If the element <em>does</em> represent its <a id=the-object-element:content-navigable-9 href=document-sequences.html#content-navigable>content navigable</a>,
      then an analogous task will be queued when the created <code id=the-object-element:document-3><a href=dom.html#document>Document</a></code> is <a href=document-lifecycle.html#completely-finish-loading id=the-object-element:completely-finish-loading>completely finished loading</a>.</p>
     <li><p>Return.</ol>
   <li><p><i>Fallback</i>: The <code id=the-object-element:the-object-element-18><a href=#the-object-element>object</a></code> element <a id=the-object-element:represents-3 href=dom.html#represents>represents</a> the element's
   children. This is the element's <a id=the-object-element:fallback-content-5 href=dom.html#fallback-content>fallback content</a>. <a id=the-object-element:destroy-a-child-navigable-2 href=document-sequences.html#destroy-a-child-navigable>Destroy a child
   navigable</a> given the element.</ol>

  <p>Due to the algorithm above, the contents of <code id=the-object-element:the-object-element-19><a href=#the-object-element>object</a></code> elements act as <a id=the-object-element:fallback-content-6 href=dom.html#fallback-content>fallback
  content</a>, used only when referenced resources can't be shown (e.g. because it returned a 404
  error). This allows multiple <code id=the-object-element:the-object-element-20><a href=#the-object-element>object</a></code> elements to be nested inside each other,
  targeting multiple user agents with different capabilities, with the user agent picking the first
  one it supports.</p>

  <p>The <code id=the-object-element:the-object-element-21><a href=#the-object-element>object</a></code> element <a href=#potentially-delays-the-load-event id=the-object-element:potentially-delays-the-load-event>potentially delays the load event</a>.</p>

  

  <p>The <code id=the-object-element:attr-fae-form-2><a href=form-control-infrastructure.html#attr-fae-form>form</a></code> attribute is used to explicitly associate the
  <code id=the-object-element:the-object-element-22><a href=#the-object-element>object</a></code> element with its <a id=the-object-element:form-owner href=form-control-infrastructure.html#form-owner>form owner</a>.</p>

  <p>The <code id=the-object-element:the-object-element-23><a href=#the-object-element>object</a></code> element supports <a id=the-object-element:dimension-attributes href=embedded-content-other.html#dimension-attributes>dimension attributes</a>.</p>

  

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/contentDocument title="The contentDocument read-only property of the HTMLObjectElement interface Returns a Document representing the active document of the object element's nested browsing context, if any; otherwise null.">HTMLObjectElement/contentDocument</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>1+</span></span><span class="safari yes"><span>Safari</span><span>3+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>1+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLObjectElement id=dom-object-contentdocument data-dfn-type=attribute><code>contentDocument</code></dfn> getter steps are to return
  <a id=the-object-element:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-object-element:concept-bcc-content-document href=document-sequences.html#concept-bcc-content-document>content document</a>.</p>

  <div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/contentWindow title="The contentWindow read-only property of the HTMLObjectElement interface returns a WindowProxy representing the window proxy of the object element's nested browsing context, if any; otherwise null.">HTMLObjectElement/contentWindow</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>22+</span></span><span class="safari yes"><span>Safari</span><span>13+</span></span><span class="chrome yes"><span>Chrome</span><span>53+</span></span><hr><span class="opera unknown"><span>Opera</span><span>?</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>17+</span></span><span class="ie no"><span>Internet Explorer</span><span>No</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android unknown"><span>WebView Android</span><span>?</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android unknown"><span>Opera Android</span><span>?</span></span></div></div></div><p>The <dfn data-dfn-for=HTMLObjectElement id=dom-object-contentwindow data-dfn-type=attribute><code>contentWindow</code></dfn> getter steps are to return
  <a id=the-object-element:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-object-element:content-window href=document-sequences.html#content-window>content window</a>.</p>

  <p>The <code id=the-object-element:dom-cva-willvalidate-2><a href=form-control-infrastructure.html#dom-cva-willvalidate>willValidate</a></code>, <code id=the-object-element:dom-cva-validity-2><a href=form-control-infrastructure.html#dom-cva-validity>validity</a></code>, and <code id=the-object-element:dom-cva-validationmessage-2><a href=form-control-infrastructure.html#dom-cva-validationmessage>validationMessage</a></code> attributes, and the <code id=the-object-element:dom-cva-checkvalidity-2><a href=form-control-infrastructure.html#dom-cva-checkvalidity>checkValidity()</a></code>, <code id=the-object-element:dom-cva-reportvalidity-2><a href=form-control-infrastructure.html#dom-cva-reportvalidity>reportValidity()</a></code>, and <code id=the-object-element:dom-cva-setcustomvalidity-2><a href=form-control-infrastructure.html#dom-cva-setcustomvalidity>setCustomValidity()</a></code> methods, are part of the
  <a id=the-object-element:the-constraint-validation-api href=form-control-infrastructure.html#the-constraint-validation-api>constraint validation API</a>. The <code id=the-object-element:dom-fae-form-2><a href=form-control-infrastructure.html#dom-fae-form>form</a></code> IDL attribute
  is part of the element's forms API.</p>

  

  <div class=example>

   <p>In this example, an HTML page is embedded in another using the <code id=the-object-element:the-object-element-24><a href=#the-object-element>object</a></code>
   element.</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>figure</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>object</c-> <c- e>data</c-><c- o>=</c-><c- s>&quot;clock.html&quot;</c-><c- p>&gt;&lt;/</c-><c- f>object</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>figcaption</c-><c- p>&gt;</c->My HTML Clock<c- p>&lt;/</c-><c- f>figcaption</c-><c- p>&gt;</c->
<c- p>&lt;/</c-><c- f>figure</c-><c- p>&gt;</c-></code></pre>

  </div>


  <nav><a href=images.html>← 4.8.4 Images</a> — <a href=index.html>Table of Contents</a> — <a href=media.html>4.8.8 The video element →</a></nav>
